二、視口

2.1 視口的意思

用JavaScript語句：

document.documentElement.clientWidth;

可以輕松輸出，當前瀏覽器寬度
 
iPhone認為自己的屏幕寬度是980px。
 
980px是什么呢？是iPhone的分辨率么？不是！ 實際上就是蘋果公司，人為制定的一個參數(shù)，
“視口”。
 
蘋果的設計人員人為，蘋果手機如果自己認為自己是980px像素的話，那么將能夠更好的再手機中顯示PC網(wǎng)站，因為絕大多數(shù)世界上的網(wǎng)站的版心，都是980px左右。
簡單的說，在瀏覽網(wǎng)頁的時候，蘋果手機認為自己是980px寬的。
 
蘋果手機，明明屏幕那么小，憑什么自己980px寬呢？？?。?！
各大手機廠商，開始運行程序員設置手機自己的視口。我們可以規(guī)范手機的視口不是默認的那個值。
 

2.2 約束視口

<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />

 
一個name屬性和id屬性都是viewport (視口)的meta標簽，就是約束視口標簽。
我們通過content屬性，來進行視口限制。
 

width=device-width,  → 設置這個視口的寬度，變?yōu)樵O備的寬度（蘋果變?yōu)榱?20） initial-scale=1.0,    → 設置視口的初始的縮放倍數(shù)為1.0倍 minimum-scale=1.0,   → 設置視口的最小的縮放倍數(shù)為1.0倍 maximum-scale=1.0,  →  設置視口的最大的縮放倍數(shù)為1.0倍 user-scalable=no   → 設置視口不可以被用戶縮放

實際上，蘋果的設備寬度也不是320px，這里的320px，到底是怎么出現(xiàn)的呢？實際上這叫做設備的“像素密度無關尺寸”。
蘋果設備，在約束視口之后的寬度就是320px。
 
制作手機網(wǎng)頁的時候，一定要約束視口??！否則響應式失效。
 
我們還要熟知一些常見設備在約束視口之后，的尺寸：
iPhone(3及以后版本): 豎向320px  橫向568px
iPad： 豎向768px  橫向1024px
iPad mini：豎向768px  橫向1024px
三星Note3： 540px
三星 Galaxy S系列的：360px;
 
只能手機的視口（約束之后），一般都是320~360px之間。
各種pad在約束視口之后，都是620~768之間。
 
上面的數(shù)據(jù)非常有意義??！
可以為我們的CSS媒體查詢的突變點，提供理論參考。
 
● 當用戶設備寬度大于980的時候，用PC界面；
● 當用戶設備寬度在620~979之間，用Pad界面；
● 當用戶設備寬度小于619的時候，用手機界面。
 
也就是說，響應式布局，不是什么新的技術，而是原有的一些技術的組合：流式布局（用百分比寫width、padding、margin）、媒體查詢（讓css能夠根據(jù)瀏覽器寬度來選擇是否被使用）

本文版權歸傳智播客UI培訓學院所有，歡迎轉載，轉載請注明作者出處。謝謝！
作者：傳智播客UI培訓學院
首發(fā)：http://m.metathetuscanyresort.com/ui