企業(yè)網(wǎng)站模板下載哪家公司強關鍵詞代發(fā)包收錄
視口是瀏覽器上顯示網(wǎng)頁的一塊區(qū)域，大小并不局限于瀏覽器可視區(qū)域范圍。PC端和移動端視口差別很大。PC端中視口寬度始終與瀏覽器窗口寬度一致，移動端視口與瀏覽器窗口寬度完全獨立。
PC端
PC端視口大小等于瀏覽器窗口可視區(qū)域大小，無論瀏覽器是否縮放。如下代碼均可獲得PC端視口寬度。
window.innerWidth
M端
移動端視口分為三類，其一布局視口、其二視覺視口、其三完美視口（理想視口）。
布局視口（本身的寬高和看到的沒關系）
縮放時布局視口的CSS像素數(shù)量保持不變，只是體積發(fā)生變化，所以視覺上變大或變小。
document.documentElement.clientWidth ?//布局視口的寬度
document.documentElement.clientHeight //布局視口的高度
視覺視口（眼見看到的寬高，視覺寬高）
視覺視口是指用戶正看到的網(wǎng)頁區(qū)域，大小等于屏幕中CSS像素的數(shù)量。頁面縮放會對視覺視口的尺寸產(chǎn)生影響，當頁面放大一倍時，CSS像素點的體積放大一倍，視口內的像素數(shù)量會減少一倍，如果縮小，則正好相反。
window.innerWidth ?//視覺視口的寬度
window.innerHeight //視覺視口的高度
完美視口（理想視口，<meta name="viewport" content="width=device-width">）
布局視口不友好，沒有考慮到手機尺寸，所以蘋果公司引入完美視口的概念。它是對設備來說最理想的布局視口尺寸，用戶進入頁面不需要進行縮放。采用如下代碼可以將布局視口尺寸設置為理想尺寸。
需要手動添寫meta視口標簽通知瀏覽器操作
meta視口標簽的主要目的：布局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬，我們布局的視口就多寬。
meta視口標簽
<meta name="viewport" content="width=device-width, user-scalable=no,?
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">- width 寬度設置的是viewport寬度，可以設置device-width特殊值
- initial-scale 初始縮放比，大于0的數(shù)字
- maximum-scale 最大縮放比，大于0的數(shù)字
- minimum-scale 最小縮放比，大于0的數(shù)字
- user-scalable 用戶是否可以縮放，yes或no（1或0)
標準的viewport設置
- 視口寬度和設備保持一致
- 視口的默認縮放比例1.0
- 不允許用戶自行縮放
- 最大允許的縮放比例1.0
- 最小允許的縮放比例1.0
?
將布局視口的寬度設置為設備獨立像素的寬度。通過如下代碼可以獲取設備獨立像素的尺寸。
screen.width ?//設備獨立像素寬度
screen.height //設備獨立像素高度