作用

75 阅读 0 评论 50 点赞

我是靠谱客的博主唠叨星星，最近开发中收集的这篇文章主要介绍作用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文内容大多基于官方文档和网上前辈经验总结，经过个人实践加以整理积累，仅供参考。

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

作用是设置可视区域的宽度及初始缩放比例

1 width

可视区域的宽度，值可为数字或关键词 device-width、phys.width

device-width：又指 css-width，通过 window.screen.width 获取
phys.width：物理宽度，通过 document.documentElement.clientWidth 获取

通常 device-width 和 phys.width 不相等，如 iPhone6 的 phys.width 为 750px，而 css-width 为 375px

2 height

可视区域的高度

3 initial-scale

可视区域初始缩放比例

4 maximum-scale

允许用户缩放的最大比例，1.0 将禁止用户放大到实际尺寸以上

5 minimum-scale

允许用户缩放的最小比例，1.0 将禁止用户缩小到实际尺寸以下

6 user-scalable

是否允许用户手动缩放，no 禁止缩放

详细说明：

浏览器如果把电脑端宽度为 980px 的网页展现在宽度为 750px 的 iPhone6 手机屏上，势必会放不下，手机端横向会出现滚动条，怎么阻止这种情况呢，很简单，浏览器默认一个虚拟窗口，不同浏览器有不同的虚拟窗口宽度的默认值，如：

Safari iPhone：980px
opera：850px
Andriod webkit：800px
IE：974px

然后把这个 980px 虚拟窗口装进宽度为 750px 的 iPhone6 中，当然这样的话必须缩放，这就是为什么在手机中展现电脑端页面没有出现横向滚动条，而且字迹明显变小的原因。

meta 标签中，width 有两个含义：

I width 是phys.width

II width 也是虚拟窗口的 width

这样就会有两个结果：

I iPhone6 的 phys.width 也变成了 css-width 即 375px，可以通过 document.documentElement.clientWidth 获取得到此时 phys.width 确实为 375px

II 如果是 375px 的手机端页面，此时的虚拟窗口的宽度也为 375px，再装进 phys.width 为 375px 的手机时，当然如设计的效果一致，不会缩放，也不会出现横向滚动条

此外还会影响响应式布局和媒体查询

@media only screen and (min-width: 350px) and (max-width: 480px){.....................}

如没有meta标签，此时的 width 当然即为 phys.width，iPhone6 就不会执行上边的括号里边的代码，但是有了 meta 标签以后呢，width 变成了 css-width，即为 375px,，所以是会执行代码的。

从以上可以看出，有了 meta 标签以后，原本的 iPhone6，即像素比为2的手机，可以按照 css-width 相同的像素比为1的手机一样正常显示，像素比更高的手机也能正常显示。当然现在 andriod 的 2K 屏在 meta 标签的帮助下也能正常显示。即对于开发者来说，已经可以不管手机的像素比，只需按照 css 像素编写代码即可。