Viewport 等比適配始末

viewport的大小決定了，css中的設置多少像素能恰好佔滿屏幕。例如，viewport=320,那麼設置div的寬度爲320px,則div恰好能佔滿屏幕

移動設備中1px不等於1個物理像素

現現在，移動設備多已經採用高倍屏，像素分辨率（物理分辨率）要比邏輯分辨率高，下表爲iphone分辨率數據

型號	像素分辨率	邏輯分辨率	倍率
iphone5	640*1136	320*568	2
iphone6	750*1334	375*667	2
iphone6 plus	1242*2208	414*736	3

可使用以下代碼來讓viewport寬度等於邏輯分辨率寬度(width=device-width)

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">複製代碼

這個時候1px是不等於一個物理像素的，而是等於倍率個物理像素，若是咱們在改變viewport的值，可讓css中的1px表明的物理像素有更多的可能

利用meta標籤對viewport進行控制

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">複製代碼

屬性名	說明
width	設置viewport的寬度，爲一個正整數，或字符串"width-device"
initial-scale	設置頁面的初始縮放值，爲一個數字，能夠帶小數
minimum-scale	容許用戶的最小縮放值，爲一個數字，能夠帶小數
maximum-scale	容許用戶的最大縮放值，爲一個數字，能夠帶小數
height	設置viewport的高度，這個屬性對咱們並不重要，不多使用
user-scalable	是否容許用戶進行縮放，值爲"no"或"yes", no 表明不容許，yes表明容許

width和scale均可以用來設置viewport的值

viewport = width;
viewport = idea viewport /scale;複製代碼

在網上搜索到一種說法:

當同時設置了width和scale的時候，viewport的取值等於上面兩個等式計算以後獲得的值大的那一個，咱們經常會看到width和initial-scale同時設置的狀況，那徹底是爲了兼容各個瀏覽器

然而，嘗試以後，發現那個說法並非很準確。若是隻設置width不設置scale,在width的值大於設備邏輯分辨率的時候，內容沒有如願的充滿整個設備，而是出現橫向滾動條（即沒有主動縮放），有點打破開篇總結的結論的意思，那真的是很是使人沮喪的。因此說：

同時設置width和scale，讓它們經過公式計算獲得的viewport的值同樣，是最爲安全的，也不會讓人產生疑惑

用viewport來解釋兩個靈異現象

• 一樣的設備，一樣是設置了border = 1px，爲何別人的網頁上的線看起來比個人細？ 如今很好解釋了，經過設置viewport，能夠改變css中的1px用多少物理像素來渲染，設置了不一樣的viewport，固然1px的線條看起來粗細不一致。（處女座的設計，還真有可能會爲了你這1px的線條看起來太粗而找你麻煩）
• 爲何一樣是1px的線，在同一個設備的同一個網頁中，不一樣位置看到的粗細不一致？以下圖所示，假若在css中的1px=1.5個物理像素，那麼在頁面中的不一樣位置，1px的線跨越的物理像素有多是兩個，也有多是三個，用3個物理像素表示的線確定是要比用兩個物理像素表示的線要寬的（雖然差別不明顯）。解決方案：設置viewport=設備的物理分辨率，讓1px=一個物理像素

viewport.png

使用viewport來實現等比適配

假若咱們要作到把設計圖根據設備的寬度等比縮放，整個裝到設備中。這種適配方案對開發來講是最爲友好的，拿到設計圖便可，不須要跟設計有過多的溝通，設計也不須要出多套圖，下降了成本。

把設計圖想象成一張300X300的圖片，分別按照寬度等比的裝到150X300、300X300，600X300的設備中，那麼圖片的大小將分別變成150X150（沒裝滿容器，可能要增長點純色背景），300X300（恰好），600X600（比容器高了，得出現滾動條了）

假若設計圖是640*1136，爲了在設計圖上量到多少樣式中就能寫多少，咱們有以下代碼

var clientWidth = document.documentElement.clientWidth,
    viewport = document.querySelector('meta[name="viewport"]');
    viewportScale = clientWidth / 640;
    viewportWidth = 640;
    viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0');
    }複製代碼

固然問題也比較明顯：

• 上面提到的兩個靈異現象，畫不了細線和1px的線在不一樣位置粗細不一致，都會存在。進化的方案，將viewport設置爲物理分辨率，同時爲了在設計圖上量到多少樣式寫多少，可能須要在打包腳本上作一些預處理（不管是百分比仍是rem的方式）

• 生硬的按照設計圖進行等比適配，字體的大小等看起來並非很溫馨。由於css中的1px應該表明多少個物理像素，硬件廠商確定有過細緻的考慮的，而咱們如今修改了這個數值。成本高一點的方案：文字流式、控件彈性、圖片等比縮放，須要的時候，設計出多套圖，須要開發跟設計有足夠的溝通，media query也要普遍使用

• 在不一樣寬高比的設備上，顯示效果不盡如人意。頁面底部的一個按鈕，在高屏（指的是相對於寬來講比例高）中顯示靠上；在矮屏（指相對於寬來講比例矮）中顯示靠下，甚至須要滾動一下屏幕才能看見，這個用戶體驗很是很差，更別說極端狀況下不容許出現縱向滾動條了。在這種狀況下可能要使用一下media query

期待您的關注~~