使用CSS3 Media Query技術適配Android平板螢幕解析度和螢幕密度

標籤：css3   media query   android平板   html5   browser   

         使用HTML5開發行動裝置 App時需要適配各種Android平板裝置的解析度和螢幕密度，過程實在很麻煩，最後的解決辦法是使用css media query，同時匹配解析度和螢幕密度，在每個裝置上進行相容性測試，最終保證在多數Android平板上都能較好的顯示。

 

         一個典型的針對裝置的Css Media Query寫法如下，可以保證頁面高度充滿螢幕，簡單的設定height：100%是不行的。

//SAMSUNG N5100, Nexus7 1,@media only screenand (min-device-height : 790px)and (max-device-height : 810px)and (-webkit-min-device-pixel-ratio: 1.3)and (-webkit-max-device-pixel-ratio: 1.4)and (orientation : landscape) {  .nav-item{    padding: $nav-item-iconSize + 12 3px 3px 0;    &:before{      top: 12px;    }  }  body{    height: 601px;  }  .category-content,  .category-content-2,{    .category-list{      padding: 10px 10px;      .list-item{        margin: 10px 15px;      }    }  }}

下面是適配時收集的各種平板的解析度資料，仔細研究還是能發現不少問題的，可以看出如果解析度是1280*800,螢幕密度是1.33125，那麼對應css中的高度應該是600.99px，底部虛擬按鍵佔48px，有了這些資料就可以做螢幕適配了。

三星 N5100平板，android4.4

07-15 11:12:56.316: E/metrics.density(23926): DisplayMetrics{density=1.33125, width=1280, height=800, scaledDensity=1.7306249, xdpi=189.02325, ydpi=188.14815}

07-15 11:16:33.296: I/Web Console(25284): devicePixelRatio= 1.3312499523162842 screen.width=1280 screen.height=800  window.outerWidth1280:79

三星 GT-5110

07-22 10:06:13.662: E/metrics.density(3438): DisplayMetrics{density=1.0, width=1280, height=752, scaledDensity=1.0, xdpi=149.82489, ydpi=149.41176}

07-22 10:06:17.037: I/Web Console(3438): devicePixelRatio= 1 screen.width=1280 screen.height=800  window.outerWidth1280:89

華為Media pad 10 fhd

07-22 12:12:34.501: E/metrics.density(29949): DisplayMetrics{density=1.5, width=1920, height=1128, scaledDensity=1.9499999, xdpi=224.73732, ydpi=224.11765}

07-22 12:12:36.824: I/Web Console(29949): devicePixelRatio= 1.5 screen.width=1920 screen.height=1200  window.outerWidth1920 at file:///android_asset/www/js/app.js:89

聯想 S5100

07-22 14:07:45.107: E/metrics.density(2541): DisplayMetrics{density=1.3312501, width=1280, height=736, scaledDensity=1.3312501, xdpi=213.0, ydpi=213.0}

華為X1

07-23 13:41:30.180: E/metrics.density(13387): DisplayMetrics{density=2.0, width=1824, height=1200, scaledDensity=2.0, xdpi=324.255, ydpi=322.966}

07-23 13:41:32.870: I/Web Console(13387): devicePixelRatio= 2 screen.width=1200 screen.height=1920  window.outerWidth1824 at file:///android_asset/www/js/app.js:89