xFace3.x 开发技巧（4）---适配方案

适配方案
分辨率适配方案

1. 使用meta标签进行缩放适配(该方案仅适用于xFace平台)

• Webkit具有高效缩放视图的能力，所以咱们能够借助viewport的设置来让界面自动适应近似分辨率的屏幕.
• Viewport为咱们提供了丰富的接口，用于控制诸如是否容许用户缩放，是否自动匹配设备dpi等。
    //示例：  <meta name="viewport"content="width=480,user-scalable=yes">
• 须要特别注意的是，咱们只能在其中设置一个值：width，而且把user-scalable设置为yes。由于Andriod平台对width属性的支持并不完美：当咱们在content中设置了其它与分辨率相关的属性，都会使其出现错误的缩放结果。
• Viewport中的width：定义物理屏幕宽度对应的像素值。若是当前应用是以宽度480px来设计开发的，就将width设置为480。
  

2. 使用js动态选择资源包

• 经过使用js判断不一样的分辨率，引用不一样的资源包进行适配。
• 优势：简单
• 缺点：增长了额外的资源，使得应用容量成倍增长。
  

横竖屏适配方案

咱们推荐使用CSS3的media选择器来定义两个方向的布局样式

• 能够将不一样方向的样式分离为两个外联css文件，以下例：
  

<link type="text/css" media="all and (orientation:landscape)" href="landscape.css"/>

<link type="text/css" media="all and (orientation:portrait)" href="portrait.css"/>

• 浏览器会在屏幕方向发生变化的时候自动应用landscape.css或者portrait.css所定义的样式。
• 这两种media切换的工做模式，相似于伪类:hover。