這篇文章主要介紹了HTML5移動端開發中的Viewport標籤及相關CSS用法解析,Viewport常被叫做視口或視區,在移動端佈局和屏幕適配中有著重要的作用,需要的朋友可以參考下
移動前端中常說的viewport (視口)就是瀏覽器顯示頁面內容的屏幕區域。其中涉及幾個重要概念是dip ( device-independent pixel 設備邏輯像素)和CSS 像素之間的關係。這里首先了解以下幾個概念。
layout viewport(佈局視口)一般移動設備的瀏覽器都默認設置了一個viewport 元標籤,定義一個虛擬的layout viewport(佈局視口),用於解決早期的頁面在手機上顯示的問題。 iOS, Android基本都將這個視口分辨率設置為980px,所以pc上的網頁基本能在手機上呈現,只不過元素看上去很小,一般默認可以通過手動縮放網頁。
visual viewport(視覺視口)和物理像素visual viewport(視覺視口)備物理屏幕的可視區域,屏幕顯示器的物理像素,同樣尺寸的屏幕,像素密度大的設備,硬件像素會更多。例如iPhone的物理像素:
iPhone5 :640 * 1136
iPhone6:750 * 1334
iPhone6 Plus:1242 * 2208
ideal viewport(理想視口)和dip (設備邏輯像素)
ideal viewport(理想視口)通常是我們說的屏幕分辨率。
dip (設備邏輯像素)跟設備的硬件像素無關的。一個dip 在任意像素密度的設備屏幕上都佔據相同的空間。
比如MacBook Pro的Retina (視網膜)屏顯示器硬件像素是:2880 * 1800。當你設置屏幕分辨率為1920 * 1200 的時候,ideal viewport(理想視口)的寬度值是1920像素, 那麼dip 的寬度值就是1920。設備像素比是1.5(2880/1920)。設備的邏輯像素寬度和物理像素寬度(像素分辨率)的關係滿足如下公式:
邏輯像素寬度*倍率= 物理像素寬度而移動端手機屏幕通常不可以設置分辨率,一般都是設備廠家默認設置的固定值,換句話說dip 的值就是ideal viewport(理想視口)(也就是分辨率)的值,比如,iPhone的屏幕分辨率:
iPhone5 :分辨率320 * 568,物理像素640 * 1136,@2x
iPhone6:分辨率375 * 667,物理像素750 * 1334,@2x
iPhone6 Plus :分辨率414 * 736,物理像素1242 * 2208,@3x,(注意,實際顯示圖像等比降低至1080×1920,具體原因我們文章最後會附帶介紹)
CSS像素CSS像素(px)用於頁面佈局的單位。樣式的像素尺寸(例如width: 100px)是以CSS像素為單位指定的。 CSS像素與dip 的比例即為網頁的縮放比例,如果網頁沒有縮放,那麼一個CSS像素就對應一個dip(設備邏輯像素) 。
使用viewport元標籤控制佈局
首先看一下viewport元標籤極其屬性:
CSS Code複製內容到剪貼板