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。