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

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

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

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

<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來針對不同寬度的屏幕寫樣式.

發表評論

手機瀏覽器都是按照什麽分辨率解析移動端網頁的