1️⃣ 视口
2️⃣ PC 端
在 PC 端,视口指的是浏览器的可视区域。其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源。
2️⃣ 移动端
移动端的视口与 PC 端不同,有三个视口
1. 布局视口
2. 视觉视口
3. 理想视口
3️⃣ 布局视口
布局视口是用来放置网页内容的区域。
一般移动设备的浏览器都默认定义一个虚拟的布局视口(layout viewport),用于解决早期的页面在手机上显示的问题。 视口大小由浏览器厂商决定,大多数设备的布局视口宽度为 980px。
document.documentElement.clientWidth
document.documentElement.clientHeight
3️⃣ 视觉视口
视觉视口就是用户可见的区域。
// 注:不缩放的情况下,视觉视口宽度 == 布局视口宽度。
window.innerWidth
window.innerHeight
3️⃣ 理想视口
宽度与屏幕同宽的布局视口称为理想视口。
理想视口的好处
1. 用户不需要缩放和滚动条就能看到网站的全部内容。
2. 针对移动端的设计稿更容易开发。
3. 注意:理想视口不是真实存在的视口
设置理想视口
1. width:视口的宽度,值为一个正整数,或字符串 device-width( 设备的实际宽度--css像素 )。不建议设置数字(安卓设备有些不支持)
2. height:视口的高度( 与width一至 )
3. user-scalable:是否允许用户进行页面缩放,值为no或yes,代表不允许与允许
4. initial-scale:页面初始缩放值,值为一个数字(可以带小数)。
5. minimum-scale:页面最小能够缩放的比例,值为一个数字(可以带小数)。
6. maximu**m-scale:**页面最大能够缩放的比例,值为一个数字(可以带小数)。
<meta name="viewport" content="width=device-width" />
// 或者
<meta name="viewport" content="initial-scale=1.0" />
// 合体
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
// 加上禁止缩放 - 可以解决移动端300毫秒的点击延迟
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
1️⃣ 缩放
2️⃣ PC 端
3️⃣ 放大时
3️⃣ 缩小时
2️⃣ 移动端
3️⃣ 放大时
3️⃣ 缩小时
布局视口不变
视觉视口变大
注意:移动端缩放不会影响页面布局
1️⃣ viewport 控制
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no,maximum-scale=1.0, minimum-scale=1.0">
// viewport 相关选项
width 布局视口宽度 - width 值可以是数字,也可以是设备宽度表示 device-width,这样可以得到完美视口
initial-scale // 为页面初始化时的显示比例 - scale = 屏幕宽度独立像素 / 布局视口宽度
注意:
chrome 测试该参数会有偏差,真机测试
initial-scale = 1.0 也可以得到完美视口
initial-scale 会影响布局视口和视觉视口的大小
width 与 initial-scale 同时设置时,会选择尺寸较大的那个
minimum-scale // 最小缩放比例 - minimum-scale = 屏幕独立像素宽度 / 视觉视口
maximum-scale // 最大缩放比例 - maximum-scale = 屏幕独立像素宽度 / 视觉视口
user-scalable // 是否允许用户通过手指缩放页面。
viewport-fit auto/contain/cover // 设置为 cover 可以解决『刘海屏』的留白问题