• 若没有在 meta 中定义 viewport，浏览器会自行定义给予预设值，而且显示效果很糟糕
• 若没有该标签，媒体查询也会失效

通常设定如下

1、

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

像素分为：css像素、独立像素、物理像素，在该语句中，width指的是css像素，device-width指的是独立像素，设置二者相等是通常的又关键的步骤，举个例子来说明好处吧：

iPad Pro 12.9"的屏幕分辨率是2732 x 2048 (H x W)，device pixel ratio （物理像素/独立像素）是 2。

以竖屏为例，我想在网页上放一个占满屏幕宽度的图片，也就是物理像素为2048，独立像素为1024的宽度的图片。如果没有设置width=device-width，根本就不知道在写css代码时设置图片宽多少合适；如果设置了，写css的时候可以写1024px，还可以写100%。

---

initial-scale设置页面初始加载出来时的缩放比例，设为1，就是不缩放，和写代码预想的页面一样。

2、

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

minimum-scale就是设置用户缩放时能够缩放的最小比例，对应的maxminum-scale就是最大比例。

最小是100%设置用户不能缩小，最大100%设置用户不能放大，合一块儿就是不能缩放。

更简洁的写法是user-scalable=no，直接规定用户不能缩放。

这些属性的其他参数：

这些属性的其他参数

参考资料

https://medium.com/frochu/html-meta-viewport-setting-69fbb06ed3d8