一、關於移動端的viewport
1 簡介
裝置的寬度是移動裝置瀏覽器和桌面瀏覽器的最大區別，移動裝置的螢幕寬度被桌面瀏覽器小，經常最大就400px。移動裝置瀏覽器廠商期望它們的客戶端在瀏覽pc頁面時，能提供更像桌面瀏覽器的體驗。
因為viewport太窄，不能很好為你的基本css布局服務了。最顯然的解決方法是讓viewport更寬。因此這個需求分為了2個方面：visual viewport和layout viewport。
visual viewport是當前顯示在螢幕上的頁面的一部分。一般來說，layout viewport比visual viewport要寬得多，並且包含出現在螢幕上的元素。設想layout viewport是乙個大的影象，它不會改變大小或形狀。現在假設你有乙個較小的框，通過它你可以看到大的影象。小的框被不透明的材料包圍，遮蓋了所有的檢視，除了大影象的一部分。可以通過框架看到大影象的部分是visual viewport。你能改變這個框的方向，但這樣的大小和形狀都不會改變。
每個移動端瀏覽器的layout viewport的寬度都不同。下圖列出了一些裝置上瀏覽器的預設viewport寬度。
layout viewport的尺寸為document.documentelement.clientwidth/clientheight。
visual viewport的尺寸為window.innerwidth/innerheight。
螢幕的尺寸為screen.width/height
當然，作為web開發人員你用於不需要這些資訊，你關心是有多少css畫素能供你使用。
2 viewport的meta標籤
該標籤設定layout viewport的寬度。如下，把預設的layout viewport寬度設為移動裝置的螢幕寬度。
二、關於畫素1 物理畫素裝置本身的畫素。2 css畫素
css畫素是乙個抽象單位，主要使用在瀏覽器上，用來精確度量web頁面上的內容。一般情況下，css畫素被稱為裝置獨立畫素（device-independent pixel），簡稱dips。
3 裝置畫素比dpr（device pixel ratio）
裝置畫素比簡稱為dpr，其定義了物理畫素和裝置獨立畫素的對應關係。它的值可以按下面的公式計算得到：
裝置畫素比 = 物理畫素 / 裝置獨立畫素
在retina屏的iphone上，devicepixelratio的值為2，也就是說1個css畫素相當於4（2 * 2）個物理畫素。
viewport中的scale和dpr是倒數關係。
獲取當前裝置的dpr：
三、手淘團隊適配協作模式
手淘設計師常選擇iphone6作為基準設計尺寸，交付給前端的設計尺寸是按750px * 1334px（高度會隨著內容多少而改變）。前端開發人員通過一套適配規則自動適配到其他的尺寸。
移動端viewport講解
viewport描述 也就是可視區域。對於桌面瀏覽器，我們都很清楚viewport是什麼，就是除去了所有工具欄 狀態列 滾動條等等之後用於 看網頁的區域，這是真正有效的區域。由於移動裝置螢幕寬度不同於傳統web,因此我們需要改變viewport 這是真正有效的 區域。由於移動裝置螢幕寬度不同於傳統w...
移動端viewport解惑
再配合 查詢 media就可以寫出適配各種手機端的頁面了。但是，為什麼就能夠了呢？網上查了很多資料，反覆看了很多遍還是似懂非，知道看了知乎中乙個問題的解答，茅塞頓開。自己不明白三個點，其中viewport，width，device width分別代表什麼？viewport瀏覽器的視窗，顯示網頁內容的...
移動端viewport的作用
我們知道，在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個畫素往往都是對應著電腦螢幕的1個物理畫素，這可能會造成我們的乙個錯覺，那就是css中的畫素就是裝置的物理畫素。但實際情況卻並非如此，css中的畫素只是乙個抽象的單位，在不同的裝置或不同的環境中，css中的1px所代表的裝置物理畫...