viewport的標籤用法
其主要用來告訴瀏覽器如何規範的渲染web頁面，而你則需要告訴它視窗有多大
移動端開發中，通常我們都會採用來設定viewport
viewport是什麼?
通俗來講，移動端的viewport就是我們所能看到的手機端瀏覽器的可視視窗大小，但viewport又不僅僅侷限於可視視窗的大小，一般情況下，它是比預設視窗大小要大的，這是因為考慮到移動裝置的解析度相對於桌面電腦來說都比較小，所以為了能在移動端正常顯示為桌面瀏覽器而設計的網頁，移動端的瀏覽器都會預設把自己的預設的viewport設為980px到1024px不等，但其後果就是會出現橫向滾動條，因為移動端瀏覽器可視區域的大小是比預設的viewport寬度要小的。
物理畫素(physical pixel)
乙個物理畫素是顯示器(手機螢幕)上最小的物理顯示單元，在作業系統的排程下，每乙個裝置畫素都有自己的顏色值和亮度值。
裝置獨立畫素(density-independent pixel)或 css畫素
裝置獨立畫素(也叫密度無關畫素)，可以認為是計算機座標系統中得乙個點，這個點代表乙個可以由程式使用的虛擬畫素(比如: css畫素)，然後由相關系統轉換為物理畫素。
所以說，物理畫素和裝置獨立畫素之間存在著一定的對應關係，就是裝置畫素比。
裝置畫素比(device pixel ratio )
裝置畫素比(簡稱dpr)定義了物理畫素和裝置獨立畫素的對應關係，它的值可以按如下的公式的得到：
裝置畫素比 = 物理畫素 / 裝置獨立畫素 // 在某一方向上，x方向或者y方向
在j**ascript中，可以通過window.devicepixelratio獲取到當前裝置的dpr。
在css中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行**查詢，對不同dpr的裝置，做一些樣式適配(這裡只針對webkit核心的瀏覽器和webview)。
綜合上面幾個概念，一起舉例說明下：
以iphone6為例：
裝置寬高為375×667，可以理解為裝置獨立畫素(或css畫素)。
dpr為2，根據上面的計算公式，其物理畫素就應該×2，為750×1334。
用一張圖來表現：
上圖中可以看出，對於這樣的css樣式：
width: 2px;
height: 2px;
寬高各放大了2倍，那就是4倍，dpr的平方
在不同的螢幕上(普通螢幕 vs retina螢幕)
共同點：css畫素所呈現的大小(物理尺寸)是一致的
不同點：1個css畫素所對應的物理畫素個數是不一致的。
在普通螢幕下，1個css畫素 對應 1個物理畫素(1:1)。
在retina 螢幕下，1個css畫素對應 4個物理畫素(1:4)。
普通螢幕
retina螢幕
裝置獨立畫素（ css畫素）
物理畫素
裝置畫素比 = 物理畫素 / 裝置獨立畫素
var dpr = window.devicepixelratio || 1;//螢幕裝置畫素比，如果獲取不到螢幕裝置畫素比，就設定為1，
//螢幕解析度
var bodyw = window.screen.width;//
螢幕解析度的寬
var bodyh = window.screen.height;//
螢幕解析度的高
//物理畫素
var pxw = bodyw * dpr;//
物理畫素的寬
var pxh = bodyh * dpr;//
物理畫素的高
基本概念 C 基本概念
由於工作中需要用到c 編寫的一些工具，有時候需要根據需求修改或者定製工具，所以現在不得不學習一下c 的基礎語法，此為筆記，不成章法！機器語言 組合語言 高階語言 面向過程的程式設計方法 物件導向的程式設計方法 泛型程式設計方法 1 演算法設計 2 源程式編輯 3 編譯 4 連線 5 執行除錯 輸入裝...
基本概念 數控系統基本概念
第一章 基本概念 數控工具機cnc是一種按事先編制好的加工零件程式進行加工的高效 自動化加工裝置。是 computer numerical control machine tools 的簡稱。數控工具機較好地解決了複雜 精密 小批量 多品種的零件加工問題，是一種柔性的 高效能的自動化工具機。西門子系...
移動端適配概念
在千峰逆戰班學習的第二十七天 一步乙個腳印，越努力越輕鬆，越堅強越幸運！繼續加油，奧利給！移動裝置螢幕尺寸不一樣，不同型號的手機會有不同大小的螢幕，不同型號的平板也是，就算是我們的pc端也是會有不同大小的螢幕 適配用來做布局的，移動端比較麻煩 裝置太多，尺寸也不一樣 而且設計師設計的尺寸 和我們切圖...