220823前端学习笔记 移动基础 视口

布局视口
可以超出移动端可视区域 自动缩放
视觉视口
可视区域 即手机屏幕大小
理想视口
布局视口=视觉视口 通过viewport实现

//不用加单位,很少考虑设置height
<meta name="viewport" content="width=375" />

<meta name="viewport" content="width=device-width" />

//初始缩放比例 值为1一定程度等价与width=device-width
<meta name="viewport" content="initial-scale=1" />
//有兼容性问题，两个都写上
<meta name="viewport" content="width=device-width，initial-scale=1" />

//阻止用户缩放
<meta name="viewport" content="initial-scale=1，user-scalable=no" />
//其他形式阻止缩放
<meta name="viewport" content="initial-scale=0.5，maximum-scale=0.5,minimum-scale=0.5" />

如何通过JavaScript获取视口宽度，主要指布局视口

//获取视口宽度
//1
console.log(document.documentElement.clientWidth);
//2
console.log(document.documentElement.getBoundingClientRect().width);