为什么开发移动端页面要加上 viewport？

<meta name="viewport" content="width=device-width, initial-scale=1">
复制代码

在移动设备（如手机）上进行网页开发一般都会加上上面一段代码内容。先看看不加时候的表现：

<html>
  <head></head>
  <body>
    <p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
    <img src="img_chania.jpg" alt="Chania" width="460" height="345">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
    </p>
  </body>
</html>
复制代码

这里使用了Chrome的远程调试，移动端设备是小米手机，使用的浏览器是Chrome。（也可以使用Chrome开发者工具的手机模拟器）

可以看到这里 window.innerWidth （window.innerWidth返回页面内容的总宽度）是 980px，而显示图片的宽度为 460px 。这就有点意思了，我们一般了解的手机屏幕宽度都比较小，比如iPhone 6/7/8的宽度就是375px，为什么这里有 980px 这么宽呢？

不急，我们再看看加上 <meta name="viewport" content="width=device-width, initial-scale=1">后的表现。在<head>中添加如下内容：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  img {
      max-width: 100%;
      height: auto;
  }
  </style>
</head>
复制代码

这里好像正常了，innerWidth的值变成了 393px，而图片因为设置宽度是100%，也没有超出可视区域宽度。对比起来，这里有个明显的差别就是，第一个例子中图片宽度460px在屏幕上显得很小，而第二个例子中图片宽度393px在屏幕上显得很大。

可以推断，在移动端的显示中，px只是一个相对概念。如果屏幕可视区域宽度为980px，那么440px宽度的图片就占可视区域宽度的一半，而如果屏幕可视区域宽度为375px，那么440px宽度的图片就会超出可视区域宽度范围，这时候屏幕上就会出现一个横向的滚动条。

那么为什么默认移动端浏览器上宽度有 980px 或是其他较大的宽度呢？可以理解为是为了兼容那些早期只为电脑设备设计的网页；电脑屏幕一般较宽，比如一个14寸电脑的浏览器显示宽度就为1440px，这样不至于显示错乱，比如一个460px的图片在电脑端显示正常，而在移动端显示就会占满甚至超出屏幕。

所以总结来说，如果是针对于移动端的网页开发，一定要加上 <meta name="viewport" content="width=device-width, initial-scale=1.0"> ，这样你写的px才可能符合你参照的视觉稿的px。

meta viewport 有6个属性：

属性	描述
width	设置 viewport 的宽度，为 device-width 或一个正整数
initial-scale	设置页面的初始缩放值，1.0则不缩放
minimum-scale	允许用户的最小缩放值
maximum-scale	允许用户的最大缩放值
height	设置 viewport 的高度（很少使用）
user-scalable	是否允许用户进行缩放

viewport部分可参考：深入理解viewport、Responsive Web Design - The Viewport（有示例）。

为什么开发移动端页面要加上 viewport？

Guess you like