Fe-interview: [html] 第10天 viewport常见设置都有哪些？

[haizhilin2013]

第10天 viewport常见设置都有哪些？

[hbl045]

用于移动端显示

[tiyunchen]

• width: width=device-width
• initial-scale
• maximum-scale
• user-scalable

[AricZhu]

[Konata9]

在移动端做开发时，必须要搞清楚 viewport 这一设置。

viewport 就是视区窗口，也就是浏览器中显示网页的部分。PC 端上基本等于设备显示区域，但在移动端上 viewport 会超出设备的显示区域（即会有横向滚动条出现）。
设备默认的 viewport 在 980 - 1024 之间。

为了让移动端可以很好地显示页面，因此需要对 viewport 进行设置。相关的设置值如下：

| 设置 | 解释 |
| ------------- | ------------------------------------------------------------------ |
| width | 设置 layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置 layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许 |

viewport 是在 meta 标签内进行控制。

// width=device-width, initial-scale=1.0 是为了兼容不同浏览器
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

相关的衍生知识： dpr 与 CSS 像素。CSS 像素的 1px 在 PC 端上与设备的物理像素基本一致，而到手机端就会有两个物理像素对应一个 CSS 像素的情况出现（如 iPhone 的视网膜屏）。
所以 iPhone 上的 dpr = 2 即 2 个物理像素 / 一个 CSS 像素（独立像素）

参考文章：移动前端开发之 viewport 的深入理解

[censek]

viewport

手机浏览器把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

属性名 | 取值 | 描述
-- | -- | --
width | 正整数 | device-width | 定义视口的宽度，单位为像素
height | 正整数 | device-height | 定义视口的高度，单位为像素，一般不用
initial-scale | [0.0-10.0] | 定义初始缩放值
minimum-scale | [0.0-10.0] | 定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale | [0.0-10.0] | 定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable | yes | no | 定义是否允许用户手动缩放页面，默认值yes

[kruzabc]

上面已经说了很多了，我补充下：

1. viewport 基本上只对移动端网页有用，一般移动端的网页我们是这么写的：

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1 minimum-scale=1 user-scalable=no”>

window.outerWidth 是屏幕宽度，这是固定不变的 。
window.innerWidth 是视口宽度
document.documentElement.clientWidth 也就是标签的宽度。
后面两个值都要根据前面的进行换算。

如何换算？

首先我们要定义个变量scale``？ 根据标签里的initial-scale=1, maximum-scale=1 minimum-scale=1`算出来的， 如果不指定这三个默认是1, 我们定义scale表示缩放比，scale默认等于1

meta标签width和height属性都有默认值
width： 默认是 980 / scale， 单位px， 如果设置为device-width, 则使用window.outerWidth 的值
height: 默认是 980 / (window.outerWidth / window.outerHeight) / scale ， 单位px

但如果width和height只有一个属性有值。
会根据 width / height == window.outerWidth / window.outerHeight 这样的换算关系算出对应的width和height。

几个属性的计算规则:

window.innerWidth = window.outerWidth / scale
document.documentElement.clientWidth  = Math.max(width, window.innerWidth) // 不能小于innerWidth

如果我们加上了开头那句meta标签，我们的网页就不能缩放，放大比例为1
也就是下面三个值相等：
window.outerWidth == window.innerWidth == document.documentElement.clientWidth
最后：屏幕尺寸=视口尺寸=html尺寸（html标签）

[larry0442]

<meta
  name="viewport"
  content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0 user-scalable=0"
/>

还有其他漏了的吗

[blueRoach]

• width：控制viewport的大小。可设置的值：数字，device-width
• height：width同理
• initial-scale：初始缩放比例，也就是第一次加载的时的缩放比例
• maximum-scale：允许用户最大缩放到的比例
• minimum-scale：允许用户最小缩放到的比例
• user-scalable：是否允许用户缩放

常规移动端设置

[giggleCYT]

|设置 | 解释|
|:----: | :----:|
|width | 设置 layout viewport 的宽度，为一个正整数，或字符串"width-device"|
|initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数|
|minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数|
|maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数|
|height | 设置 layout viewport 的高度，这个属性对我们并不重要，很少使用|
|user-scalable | 是否允许用户进行缩放，值为"no"或"yes"， no 代表不允许，yes 代表允许|

[MrZ2019]

设置 | 解释
-- | --
width | 设置 layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数
height | 设置 layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许

[buuug7]

react官方推荐的写法，其他的乱七八糟的请忘记把

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