视口(viewport)
视口(viewport)是用来约束网站中最顶级块元素的, 即决定了的大小
PC设备
在pc设备上viewport的大小取决于浏览器窗口的大小, 以css像素作为度量单位(pc端 视口(virewport大小与浏览器大小一致)).
通过以往css的知识, 我们都能理解的大小是会影响到我的网页布局的, 而viewport又决定了的大小, 所以viewport间接的并决定了我的网页布局.
移动设备
移动设备的屏幕普遍是比较小的, 但是大部分的网站又都是为PC设备来设计的, 要想让移动设备也可以正常显示网页, 移动设备不得不做一些处理;
在移动设备上viewport不再受限于浏览器窗口, 而是允许开发人员自由设置viewport的大小, 通常浏览器会设置一个默认大小的viewport, 为了能够正常显示那些转为pc设计的网页, 一般这个值的大小会大于屏幕的尺寸.
viewport
移动设备上有2个viewport(为了方便讲解人为定义的), 分别是layout viewport 和ideal viewport
layout viewport(布局视口): 指的是我们可以进行网页布局区域的大小, 同样以css像素的计量单位, 可以通过下面方式获取;
document.documentElement.clientWidth
document.documentElement.clientHeight
如果要保证为PC设计网页在移动设备上布局不会发生错乱, 移动设备会默认设置一个较大的viewport, 这个viewport实际指的是layout viewport
ideal viewport(理想视口):设备屏幕区域,(以设备独立像素PT, DP作为单位) 以CSS像素作为计量单位, 其大小是不可能被改变的 通过下面方式可以获取
获取ideal viewport有两种情形
新设备
window.screen.width
window.screen.height
老设备
window.screen.width / window.devicePixelRatio;
viewport 标签
<!-- 对viewport的设置的meta建议写在已有的meta标签后面(<meta charset="UTF-8">) -->
<!-- name="viewport":说明当前meta标签是用来设置viewport的属性, 这个属性只有在移动端才会有效 -->
<!-- content="width=device-width" : 进行viewport的设置 width: 设置viewport的宽度 device-width:获取当前设备的宽度 -->
<meta name="viewport" content="width=device-width">
<!-- initial-scale=1: 设置初始缩放比例 当设置了 width="device-width", 也达到了 initial-scale=1的效果
其实initial-scale=1 = ideal viewport / lay viewport 意味着initial-scale=1, 相当于设置两个viewport的宽度一致 -->
<meta name="viewport" content="initial-scale=1.0">
<!-- 为了兼容性 一般情况下 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- maximum-scale: 设置最大缩放比例
minimum-scale: 这是默认状态下最小的缩放比例
user-scalable: 设置是否允许用户缩放 no/yes -->
<!--快捷键 meta:vp + tab键-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum=1.0, minimum=1.0">
移动端常见适配方案
- 设置
<meta name="viewport" content="width=device-width", initial-scale=1.0">
- 设置页面宽度为百分比