[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" />

[xiezhenghua123]

移动端开发必须要知道viewport

[lxt-ing]

viewport 属性 ：width:宽,height:高，initial-scale:初始缩放比例，user-scalable:允许用户手动缩放，maximum-scale:最大缩放比例，minimum-scale:最小缩放比例。

[amikly]

概念

viewpoint是视区窗口，就是浏览器中显示网页的部分。

PC端上基本等于设备显示区域，但在移动端上viewpoint会超过设备的显示区域（会有横向滚动条的的出现）

设备默认的viewpoint在 980 - 1024 之间

属性设置

<!-- 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"
/>

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

[yxllovewq]

总结：

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

content可选值： width: 布局视口宽度 height：布局视口高度 initial-scale：初始缩放比 maximum-scale：最大放大比例 minimum-scale：最大缩小比例 user-scalable：用户是否可缩放

[syfine]

• width:布局视口宽度
• height：布局视口高度
• initial-scale：初始缩放比
• maximum-scale：最大放大比例
• minimum-scale:最大缩比例
• user-scalable：用户是都可缩放

[WangXi01]

是在meta标签里面控制，主要用于手机端，因为没有兼容的话，在电脑上面写的网页到手机里面是会超出的，viewport 就是视区窗口，也就是浏览器中显示网页的部分，我们可以设置它在手机上面展示到底多宽，以及缩放的比例 设置 解释 width 设置 layout viewport 的宽度，为一个正整数，或字符串"width-device" initial-scale 设置页面的初始缩放值，为一个数字，可以带小数 minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数 maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数 height 设置 layout viewport 的高度，这个属性对我们并不重要，很少使用 user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许

[Iambecauseyouare]

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

[lili-0923]

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