视口概念 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Viewport_concepts
视口(viewport)代表当前可见的计算机图形区域.在 Web 浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的 UI,
菜单栏等——即指你正在浏览的文档的那一部分.概括地说,viewport 基本上是当前文档的可见部分.
document.documentElement.clientWidth /* 1920 */
window.innerWidth /* 1920 */
window.outerWidth /* 1920 */
文档的 Element.clientWidth 是指一个文档使用 CSS pixels 单位表示的内部宽度, 包括其 padding
(不包括 borders, margins 或垂直滚动条,如果有的话). 这就是 viewport 的宽度
Window.innerWidth 是用 CSS pixels 单位表示的浏览器窗口 viewport 宽度,包括垂直滚动条,如果渲染了的话
Window.outerWidth 是指包括了浏览器外边框的窗口宽度.
innerWidth 和 outerWidth 是相同的,但是 outerHeight 比 innerHeight 高100px.这是因为 outerHeight
的测量包括浏览器框架在内,包括了地址栏和书签栏总共 100px 的高度,而浏览器没有左右边框.
innerHeight 和 innerWidth 所组成的区域通常被认为是布局视口(layout viewport) .
浏览器的框架不被认为是 viewport 的一部分.
Web 浏览器包含两个 viewport,布局视口(layout viewport)和视觉视口(visual viewport).
visual viewport 指当前浏览器中可见的部分,并且可以变化.当使用触屏双指缩放,当动态键盘在手机上弹出的时候,
或者之前隐藏的地址栏变得可见的时候,visual viewport 缩小了,但是 layout viewport 却保持不变.
参考:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
<meta name="viewport" content="width=device-width,initial-scale=1.0">
| 键 | 值 | 描述 |
|---|---|---|
width | 正整数或文本 device-width | 定义要在其上呈现网站的视口的像素宽度. |
height | 正整数或文本 device-height | 定义视口的高度.未被任何浏览器使用. |
initial-scale | 0.0与之间的正数10.0 | 定义设备宽度(device-width在纵向模式或device-height横向模式下)和视口大小之间的比率. |
maximum-scale | 0.0与之间的正数10.0 | 定义放大的最大数量.它必须大于或等于,minimum-scale否则行为未定义.浏览器设置可以忽略此规则,iOS10 +默认情况下会忽略它. |
minimum-scale | 0.0与之间的正数10.0 | 定义最小缩放级别.它必须小于或等于,maximum-scale否则行为是不确定的.浏览器设置可以忽略此规则,iOS10 +默认情况下会忽略它. |
user-scalable | yes 要么 no | 如果设置为no,则用户将无法放大网页.默认值为yes.浏览器设置可以忽略此规则,默认情况下,iOS10 +会忽略它. |
在移动端,屏幕设备大小固定,常用选项是:"width=device-width","initial-scale=1.0","user-scalable=no"
视口宽度设为移动设备屏幕设备宽度,初始缩放比例1.0,禁止缩放浏览器.在移动设备上,是不希望有横向滚动条的.
1.1 测试"width=device-width"
| meta设定 | <meta name="viewport" content="width=device-width,user-scalable=no"> | |
| 最宽元素 | <div style="width:720px"> | |
| 视口大小 | window.innerWidth [ 414 ] | window.innerHeight [ 736 ] |
1.2 测试"width=300"
| meta设定 | <meta name="viewport" content="width=300,user-scalable=no"> | |
| 最宽元素 | <div style="width:720px"> | |
| 视口大小 | window.innerWidth [ 300 ] | window.innerHeight [ 534 ] |
测试1.1的结果说明,手机屏幕宽度"device-width"的值是 414 ,因为设置了"width=device-width"
测试1.2得到 300X534 因为设置了"width=300" 而534是由比例计算得到. (300*414)/736=534 这是应该是设备自动在维持414X736的比例
2.1 测试"user-scalable=yes"
| meta设定 | <meta name="viewport" content="width=device-width,user-scalable=yes"> | |
| 最宽元素 | <div style="width:720px | 320px"> | |
| 视口大小 | window.innerWidth [ 720 | 414 ] | window.innerHeight [ 1279 | 736 ] |
测试2.1,在网页内容宽度不同时,视口大小不一样.在设定缩放为yes前提下,如果最宽元素宽度不超过width设定的值(414),那么视口宽度仍然
是"device-width(414)",但是超过时,视口宽度变成了720.这说明视口宽度会根据网页大小自动变化.在测试1.1中,元素最大宽度也是
720,但视口宽度是414,因为禁止缩放了.
设置"user-scalable=no"可以避免浏览器自动调整缩放比例而导致的不期望的显示效果
3.1 测试"initial-scale=0.5"
| meta设定 | <meta name="viewport" content="initial-scale=0.5,user-scalable=no"> | |
| 最宽元素 | <div style="width:720px"> | |
| 视口大小 | window.innerWidth [ 829 ] | window.innerHeight [ 1472 ] |
测试3.1,视口宽度得到 829,这个值正好是 414X2=828 ,如此看来,缩放比例是基于414的,设置为0.5时,414/0.5=828 同样,高度
也是如此,736/0.5=1472 那么,414X736是设备的物理尺寸,每种设备都有一个固定的物理尺寸.这个尺寸的特点是,不需要滚动条就能
看到的范围.如果设置为1.0,则效果等同于"width=device-width",会得到414X736.如果设置为2.0,则会得到 207X368.