# viewport視口解析 這節來聊 viewport （視口）， viewport 就是瀏覽器可以用來顯示頁面內容的屏幕區域。 桌面上視口寬度等于瀏覽器寬度，但在手機上有所不同。這里涉及三個視口： * 布局視口：手機上為了容納為桌面瀏覽器設計的網站，默認布局視口寬度遠大于屏幕寬度，為了讓用戶看到網站全貌，它會縮小網站。 * 視覺視口：用戶正在看到的網站的區域，與設備屏幕一樣寬。 * 理想視口：當網站是為手機準備的時候使用。使用meta生命。早期iphone理想視口為320x480px。 如果沒有 viewport 的設置，也就是下面這一行： <meta name="viewport" content="width=device-width, initial-scale=1" /> 那么當一個普通桌面版頁面在手機上打開的時候，會發現頁面各個元素都會變得很小。無論在桌面設備上還是在移動設備上，用戶都習慣上下滾動網站，而不是橫向滾動，因此，如果用戶必須橫向滾動或縮小頁面才能查看整個網頁，那么這將給用戶帶來糟糕的體驗。  案例： * [沒有設置viewport](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/responsive/vp-no.html) * [設置viewport](https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ui/responsive/vp.html) 這是因為手機會自動對頁面進行它自認為”最好“的縮放，從而盡量把整個頁面能在手機這個小的多的屏幕上整個都裝下。這個默認行為是我們在做響應式網頁設計的時候不希望看到的，所以在一般的響應式頁面中，第一步就是添加上面這一行，來禁用手機的這種默認縮放行為。但是究竟上面這些內容都是什么意思呢？不著急，下面慢慢來聊。 ## 邏輯像素 英文叫 dip ，也有人翻譯叫”邏輯像素“。簡單來說，dip 是咱們在做設計的時候真正要關心的，而設備真正的硬件像素值一般是不需要關心的。先來了解一下下面三個概念： * 硬件像素：顯示器的物理像素，同樣尺寸的屏幕，像素密度大的設備，硬件像素會更多。例如，iPhone 5所配屏幕的水平硬件像素為640。 * 設備無關像素(dip)：這個是跟設備的硬件像素密碼無關的。一個 dip 在任意像素密度的設備屏幕上都占據相同的空間。例如：iPhone 5的設備無關像素寬度為320。 * CSS像素：用于頁面布局的單位。樣式的像素尺寸（例如 width: 100px）是以CSS像素為單位指定的。CSS像素與 dip 的比例即為網頁的縮放級別，也就是網頁在沒有做縮放的時候，一個 css 像素就對應一個 dip 。 舉個例子，比如我有一個筆記本，當我把瀏覽器調到800像素寬的時候，那么此時我的 viewport 就是800像素寬。但我把瀏覽器拉寬，viewport 也就不斷變寬。但是不同的筆記本的像素密度其實是不一樣的，比如我的筆記本的硬件像素是：2560x1700 。但是當我把瀏覽器拉成全屏的時候，viewport 的寬度值是 1280 。這里顯然我的筆記本的設備像素比是2，1280 是 dip 值。 ## 參數作用詳解 使用元視口值width=device-width可指示網頁與屏幕寬度（以設備無關像素為單位）進行匹配。這樣，網頁就可以重排內容以匹配不同的屏幕尺寸。 有些瀏覽器（包括iOS和Windows Phone）在旋轉為橫向模式時會保持網頁寬度不變，并且會縮放（而非重排）網頁以填充屏幕。添加屬性initial-scale=1均可指示瀏覽器將CSS像素與設備無關像素的比例設為1:1（而不用考慮設備的屏幕方向），并且可讓網頁利用整個橫向寬度。可以參考[google developers](https://developers.google.com/speed/docs/insights/ConfigureViewport?hl=zh-cn) 可以設置 user-scalable=no 來禁用用戶縮放功能，但是一般不建議這樣做。 ## 參考資源 [google&udacity 課程的 viewport 章節](https://www.udacity.com/course/viewer#!/c-ud893/l-3494350031/m-3493209336) [bootstrap](http://getbootstrap.com/css/)