CSS—viewport视口详解

目录

一、概述

二、移动端视口

---

一、概述

视口是浏览器上显示网页的一块区域，大小并不局限于浏览器可视区域范围。PC端和移动端视口差别很大。PC端中视口宽度始终与浏览器窗口宽度一致，移动端视口与浏览器窗口宽度完全独立。

PC端视口大小等于浏览器窗口可视区域大小，无论浏览器是否缩放。如下代码均可获得PC端视口宽度。

window.innerWidth

二、移动端视口

移动端视口分为三类，其一布局视口、其二视觉视口、其三完美视口。

布局视口

缩放时布局视口的CSS像素数量保持不变，只是体积发生变化，所以视觉上变大或变小。

                                       

document.documentElement.clientWidth  //布局视口的宽度
document.documentElement.clientHeight //布局视口的高度

视觉视口

视觉视口是指用户正看到的网页区域，大小等于屏幕中CSS像素的数量。页面缩放会对视觉视口的尺寸产生影响，当页面放大一倍时，CSS像素点的体积放大一倍，视口内的像素数量会减少一倍，如果缩小，则正好相反。

                               

window.innerWidth  //视觉视口的宽度
window.innerHeight //视觉视口的高度

完美视口

布局视口不友好，没有考虑到手机尺寸，所以苹果公司引入完美视口的概念。它是对设备来说最理想的布局视口尺寸，用户进入页面不需要进行缩放。采用如下代码可以将布局视口尺寸设置为理想尺寸。

如上代码所示，将布局视口的宽度设置为设备独立像素的宽度。通过如下代码可以获取设备独立像素的尺寸。

screen.width  //设备独立像素宽度
screen.height //设备独立像素高度