本篇文章主要通過調研不同橫向解析度的移動裝置的網頁解析情況,來給出移動端網頁設定寬度的建議.
在給出調研結果之前,如果你對移動端網頁開發還不夠了解的話,請先閱讀」移動端網頁開發基礎」.
各位都知道手機的橫向解析度多種多樣,所以我們在編寫**之前都會加入一句:
這句話的意思是使整個瀏覽器的寬度等於裝置螢幕的寬度,但是做完這句初始化之後,瀏覽器的寬度真的就是螢幕寬度嗎?
其實上面這條語句嚴格說來僅僅適用於解析度為320×480的ios裝置,如果你在你的網頁裡寫了這條語句,然後又新增了乙個寬度為320px的div,你會發現在iphone 3gs上,這個div是100%撐滿螢幕的
iphone4+在解析網頁的時候依舊把自己當作一台橫向解析度為320px的裝置這樣的話在iphone上開發移動端網頁就非常簡單了,但到目前為止我們僅僅解決了乙個平台的問題但是在螢幕上顯示的時候,會將尺寸擴大兩倍,以前320個畫素,在螢幕上會自動擴充為640個,這樣就省去了根據兩種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的機型,但是被我忽略掉了.
可以下乙個大概的結論:
開發移動端網頁,非必要情況下不對於頁面設定寬度,只需加上margin來靈活適應螢幕
但如果確實有一些板塊需要設定寬度,設定為300px即可(左右各留10px邊距)
如果需要兼顧720px的高階機型,需要在css中寫入media query來針對不同寬度的螢幕寫樣式.
posted in: 業界文件
電子郵件位址不會被公開。 必填項已用*標註
手機瀏覽器都是按照什麼解析度解析移動端網頁的
本篇文章主要通過調研不同橫向解析度的移動裝置的網頁解析情況,來給出移動端網頁設定寬度的建議.在給出調研結果之前,如果你對移動端網頁開發還不夠了解的話,請先閱讀 移動端網頁開發基礎 各位都知道手機的橫向解析度多種多樣,所以我們在編寫 之前都會加入一句 這句話的意思是使整個瀏覽器的寬度等於裝置螢幕的寬度...
瀏覽器解析度自適配
主要用到的兩段 window.onresize function 檢測視窗尺寸變化 document.body.clientwidth 當前螢幕寬度 檢測變化 window.onresize function var mainele document.getelementbyid main func...
常見的瀏覽器解析度
測試web網頁的適配，必須要了解下最主要的解析度，以及最低適配 16 9寬高比常見的解析度有四種 1280 720 17吋 1366 768 1360 768 18.5吋 1600 900 20吋 1920 1080 21.5 23 23.6 24 24.6 25 27 1280 800是筆記本常用...