手機瀏覽器都是按照什麼解析度解析移動端網頁的

標籤：問題   設定   idt   忽略   app   not   掃描   寫代碼   android平台   

無論是公司項目還是合作項目有時候都需要一些移動端網頁開發的任務,比如掃描二維碼之後或者內嵌到用戶端裡面的頁面,等等.

本篇文章主要通過調研不同橫向解析度的行動裝置的網頁解析情況,來給出移動端網頁設定寬度的建議.

在給出調研結果之前,如果你對移動端網頁開發還不夠瞭解的話,請先閱讀”移動端網頁開發基礎”.

各位都知道手機的橫向解析度多種多樣,所以我們在編寫代碼之前都會加入一句:

<meta name=”viewport” content=”width=device-width”>

這句話的意思是使整個瀏覽器的寬度等於裝置螢幕的寬度,但是做完這句初始化之後,瀏覽器的寬度真的就是螢幕寬度嗎?

其實上面這條語句嚴格說來僅僅適用於解析度為320×480的iOS裝置,如果你在你的網頁裡寫了這條語句,然後又添加了一個寬度為320px的div,你會發現在iPhone 3Gs上,這個div是100%撐滿螢幕的

如果你有一台iPhone4(螢幕寬度為640px),同樣載入剛才那個頁面會發現這個div同樣是撐滿整個螢幕的,按照這條meta語句,應該將這個div寬度設為640px才會撐滿對不對,這就是iPhone4+特殊的解析機制

iPhone4+在解析網頁的時候依舊把自己當作一台橫向解析度為320px的裝置

但是在螢幕上顯示的時候,會將尺寸擴大兩倍,以前320個像素,在螢幕上會自動擴充為640個,這樣就省去了根據兩種iPhone開發兩種尺寸網頁的麻煩

這樣的話在iPhone上開發移動端網頁就非常簡單了,但到目前為止我們僅僅解決了一個平台的問題

Android平台怎麼辦,所以,我又測試了android手機端瀏覽器解析的情況,由於裝置所限,我只測試了寬度為480的moto裡程碑2,小米,還有寬度為720的Galaxy Nexus.

結果比較意外,本以為小米等主流寬度為480px的手機的dvice-width是480px,但是當我還是載入剛才那個網頁時,320px的div很好的撐滿了螢幕,這樣看來其實即使寬度為480px的android手機也是按照320px來解析,只是顯示上與iPhone4+不同,自動擴大為1.5倍.

然後又測試了Galaxy Nexus,這款手機螢幕寬度是720px,本想也是按照320px來解析,但事實證明不是,經過我的調試,這款手機是根據360px來解析的,正好是720px的一般.

看來,除了螢幕寬度大於640px的手機,只要是低於640px的都可以認為是按照320px來解析網頁,給開發帶來很大便利.現在720px的手機比較少,所以可以暫時僅僅開發320px寬度的網頁.

條件所限,沒有測試寬度為540px的android手機,當然android中也有寬度為240px的機型,但是被我忽略掉了.

可以下一個大概的結論:

1. 開發移動端網頁,非必要情況下不對於版面設定寬度,只需加上margin來靈活適應螢幕
2. 但如果確實有一些板塊需要設定寬度,設定為300px即可(左右各留10px邊距)
3. 如果需要兼顧720px的高端機型,需要在css中寫入media query來針對不同寬度的螢幕寫樣式.

Posted in: 業界文檔 Tagged: android, css, html, iOS, webapp, 行動瀏覽器, 移動網頁 發表評論

手機瀏覽器都是按照什麼解析度解析移動端網頁的