1. 程式人生 > >Android手機上關於viewport的理解

Android手機上關於viewport的理解

一.Android預設的viewport(即網頁未設定viewport元標籤的時候)(windows.innerWidth

在網頁未載入完成時,值為320,一旦頁面載入完成,該值會發生改變,android_2.x的值為800android_4.x的值為980,用以適配一般的web網頁。

二.Android的手機解析度的獲取

使用window.screen獲取,雖然window.screen不是w3c標準,但是絕大部分瀏覽器均支援。

經測試,在android2.22.3上的自帶瀏覽器,該值(window.screen.widthwindow.screen.height)獲取的是錯誤的,和瀏覽器的viewport

的寬高一樣(有人認為這是android2.22.3bug,連結如下:https://code.google.com/p/android/issues/detail?id=12455),在android2.14.0以上的系統,均顯示正確的解析度。

三.裝置畫素比(window.devicePixelRatio

一般window.devicePixelRatio的值為0.7511.522.253等。蘋果規定window.devicePixelRatio的值為12,來區分普通螢幕和視網膜屏,但是谷歌拓展該定義,用以適配更多的尺寸的螢幕。

四.viewport元標籤

主要講widthtarget-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

有三個常量:high-dpi240),medium-dpi160),low-dpi120),分別對應解析度為480*800320*480240*320

具體計算公式:

    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-dpi160),而是142.2,根據上面公式,計算出的頁面寬度為720/2=360,所以會有40px的空白。

此時,如果需要將320px的圖片無縮放的鋪滿網頁的寬度,可以將target-densitydpi的值通過js按上述公式計算後重新設定即可。(注:Android2.22.3上無法正確設定,原因見第二條,裝置的解析度寬度獲取不正確,可以採取medium-dpi這個預設值)。

總結

1.若手機網頁需要定死寬度,比如320480等,需要設定viewporttarget-densitydpi最好是根據上條公式計算出(若是Android2.22.3,則可以給出預設值medium-dpi),可以適配絕大多數的手機網頁,包括720p1080p等(除非是Android2.22.3系統的手機,且解析度又是比較奇葩的(不是320480等),這樣的手機畢竟很少,如果需要完美適配頁面寬度,只能根據ua通過伺服器查詢該機型的解析度,然後計算)

2.手機頁面不要使用絕對寬度,可以通過百分比設定,一方面以防出現viewport設定不正確(1中的例外情況)後,頁面變形;另一方面方便以後修改(只需修改viewport中的引數即可)

3.若手機網頁需要按照裝置寬度,設定viewporttarget-densitydpidevice-dpi,頁面可採用響應式佈局,或media queries等技術。