本文主要是介绍meta name=viewport content=width=device-width, initial-scale=1 作用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
本文内容大多基于官方文档和网上前辈经验总结，经过个人实践加以整理积累，仅供参考。
<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 像素编写代码即可。
这篇关于meta name=viewport content=width=device-width, initial-scale=1 作用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
