Android手機上關於viewport的理解
一.Android預設的viewport(即網頁未設定viewport元標籤的時候)(windows.innerWidth)
在網頁未載入完成時,值為320,一旦頁面載入完成,該值會發生改變,android_2.x的值為800,android_4.x的值為980,用以適配一般的web網頁。
二.Android的手機解析度的獲取
使用window.screen獲取,雖然window.screen不是w3c標準,但是絕大部分瀏覽器均支援。
經測試,在android2.2和2.3上的自帶瀏覽器,該值(window.screen.width和window.screen.height)獲取的是錯誤的,和瀏覽器的viewport
三.裝置畫素比(window.devicePixelRatio)
一般window.devicePixelRatio的值為0.75,1,1.5,2,2.25,3等。蘋果規定window.devicePixelRatio的值為1或2,來區分普通螢幕和視網膜屏,但是谷歌拓展該定義,用以適配更多的尺寸的螢幕。
四.viewport元標籤
主要講width和target-densitydpi
1. width
設定viewport的寬度,iphone下有效(iphone讀取後自動計算target-densitydpi),android_4.0以上有效(若不設定target-densitydpi;設定target-densitydpi後,則以target-densitydpi為準)
2. target-densitydpi
Android瀏覽器所需要的,因為Android硬體裝置標準不一, 其中同樣物理尺寸的螢幕,可能因為dpi的不同而具有不同的解析度。
target-densitydpi可以設定的值(device-dpi|指定的具體的dpi的值),target-densitydpi
具體計算公式:
target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160
(應用的公式原理是裝置的寬度的物理畫素的計算)
案例:
如果設定viewport為<meta name="viewport" content="target-densitydpi=medium-dpi, width=320, user-scalable=no" />,頁面放置一個寬為320px的圖片時,在720*1280的手機上看到的效果是有40px的寬度上的空白。這是因為該手機的真實dpi的值不是預設的medium-dpi(160),而是142.2,根據上面公式,計算出的頁面寬度為720/2=360,所以會有40px的空白。
此時,如果需要將320px的圖片無縮放的鋪滿網頁的寬度,可以將target-densitydpi的值通過js按上述公式計算後重新設定即可。(注:Android2.2和2.3上無法正確設定,原因見第二條,裝置的解析度寬度獲取不正確,可以採取medium-dpi這個預設值)。
總結
1.若手機網頁需要定死寬度,比如320或480等,需要設定viewport的target-densitydpi,最好是根據上條公式計算出(若是Android2.2和2.3,則可以給出預設值medium-dpi),可以適配絕大多數的手機網頁,包括720p和1080p等(除非是Android2.2或2.3系統的手機,且解析度又是比較奇葩的(不是320,480等),這樣的手機畢竟很少,如果需要完美適配頁面寬度,只能根據ua通過伺服器查詢該機型的解析度,然後計算)
2.手機頁面不要使用絕對寬度,可以通過百分比設定,一方面以防出現viewport設定不正確(1中的例外情況)後,頁面變形;另一方面方便以後修改(只需修改viewport中的引數即可)
3.若手機網頁需要按照裝置寬度,設定viewport的target-densitydpi為device-dpi,頁面可採用響應式佈局,或media queries等技術。