视口 css

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

PC端

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

window.innerWidth

M端

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

布局视口（本身的宽高和看到的没关系）

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

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

视觉视口（眼见看到的宽高，视觉宽高）

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

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">

1. width 宽度设置的是viewport宽度，可以设置device-width特殊值
2. initial-scale 初始缩放比，大于0的数字
3. maximum-scale 最大缩放比，大于0的数字
4. minimum-scale 最小缩放比，大于0的数字
5. user-scalable 用户是否可以缩放，yes或no（1或0)

标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0
   

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

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