瀏覽器的視窗。viewport與跟viewport有關的meta標籤的關係，詳細建議讀一讀這篇文章：移動前端開發之viewport的深入理解，viewport與布局的關係，可以看下這篇文章：在移動瀏覽器中使用viewport元標籤控制布局
visual viewport可見視口 螢幕寬度
layout viewport布局視口 dom寬度
ideal viewport理想適口：使布局視口就是可見視口裝置寬度(
visual viewport)與dom寬度(layout viewport), scale的關係為：
裝置畫素比（1/scale） ＝ 物理畫素 / 裝置獨立畫素viewport中的scale和dpr是倒數關係。
獲取當前裝置的dpr：
dip或dp,（device independent pixels，裝置獨立畫素）與螢幕密度有關。dip可以用來輔助區分視網膜裝置還是非視網膜裝置。安卓裝置根據螢幕畫素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級。規定以160dpi為基準，1dp=1px。如果密度是320dpi，則1dp=2px，以此類推。
ios裝置：從iphone4開始為retina屏
物理畫素又被稱為裝置畫素，他是顯示裝置中乙個最微小的物理部件。每個畫素可以根據作業系統設定自己的顏色和亮度。所謂的一倍屏、二倍屏(retina)、三倍屏，指的是裝置以多少物理畫素來顯示乙個css畫素，也就是說，多倍屏以更多更精細的物理畫素點來顯示乙個css畫素點，在普通螢幕下1個css畫素對應1個物理畫素，而在retina螢幕下，1個css畫素對應的卻是4個物理畫素。
css畫素是乙個抽像的單位，主要使用在瀏覽器上，用來精確度量web頁面上的內容。一般情況之下，css畫素稱為與裝置無關的畫素(device-independent pixel)，簡稱dips。css畫素顧名思義就是我們寫css時所用的畫素。
螢幕畫素密度是指乙個裝置表面上存在的畫素數量，它通常以每英吋有多少畫素來計算(ppi)。螢幕畫素密度與螢幕尺寸和螢幕解析度有關，在單一變化條件下，螢幕尺寸越小、解析度越高，畫素密度越大，反之越小。
螢幕尺寸、螢幕解析度-->對角線解析度/螢幕尺寸-->螢幕畫素密度ppi
|裝置畫素比dpr = 物理畫素 / 裝置獨立畫素dip(dp)
|viewport: scale
|css畫素px
定義：font size of the root element.
移動端適配 適配方案總結
通過特定的限制，控制不同樣式的呈現 限制條件最終返回true false，為真，應用其樣式 12 stylesheet media max width 800px href example.css 34 5操作邏輯 only,and,not 你可以使用邏輯操作符，包括not and和only等，構建...
移動端適配方案
最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...
移動端適配方案
先來看下目前iphone各個型號尺寸和解析度 我們所能看到的手機端瀏覽器的可視視窗大小 viewport分為三種 layout viewport 布局檢視 移動裝置瀏覽器認為自己必須能夠讓所有 都顯示 即便那些不是為移動瀏覽器設計的 所以設計了乙個大於螢幕尺寸的viewport 用來相容那些不是為移...