用于移动端显示

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

No description provided.

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

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

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

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 的深入理解

viewport

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

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

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

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标签）

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

还有其他漏了的吗

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

常规移动端设置

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

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

移动端开发必须要知道viewport

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

概念

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

总结：

<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：用户是否可缩放

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

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

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

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