视口 viewport移动端 -----学习笔记

1.视口viewport

移动设备屏幕普遍都是比较小的，但是大部分的网站又都是为PC设备来设计的，要想让移动设备也可以正常显示网页，移动设备不得不做一些处理，只要viewport足够大，就能保证原本为PC设备设计的网页也能在移动设备上正常显示，移动设备厂商也的确是这样来处理的。
在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览 器会设置一个默认大小的viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸。
如下图为常见默认viewport大小（仅供参考）

不同的移动厂商分别设置了一个默认的viewport的值，这个值保证大部分网页可以正常在移动设备下浏览。

layout vierport通过
// 获取layout viewport
document.documentElement.clientWidth;
document.documentElement.clientHeight;
获取
以上的为规定的layout viewport
而实际中需要的是idea viewport ，通过
// 获取ideal viewport有两种情形
// 新设备
window.screen.width;
window.screen.height;
// 老设备
window.screen.width / window.devicePixelRatio;
window.screen.height / window.devicePixelRatio;
获取

2.viewport设置

2.1常用设置
移动页面最理想的状态是，避免滚动条且不被默认缩放处理，我们可以通过设置
常用！为了解决一些兼容问题）即

<meta name="viewport" content="width=device-width, initial-scale=1.0">

来进行控制，并改变浏览器默认的layout viewport的宽度。

对viewport的设置的meta建议写在已有的meta标签()之后
name=“viewport”:说明当前meta标签是用来设置viewport的属性的，这个属性只有在移动端才会有效
2.2 常用属性

// 通过设置属性content=""实现，中间以逗号分隔
// 例如<meta name="viewport" content="width=device-width">

快捷输入 ：meta:vp+tab
width 设置layout viewport 宽度，其取值可为数值或者device-width。
user-scalable是否允许用户进行缩放，值为"no"或"yes"。
initital-scale设置页面的初始缩放值，为一个数字，可以带小数。
height 设置layout viewport 高度，其取值可为数值或者device-height（不常用）
maximum-scale允许用户的最大缩放值，为一个数字，可以带小数。
minimum-scale允许用户的最小缩放值，为一个数字，可以带小数。
注：device-width 和 device-height就是ideal viewport的宽高。