meta viewport 你真的了解吗？

前言

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

上面是一行我几乎每天都用到的代码，它给我们带来的好处是非常明显的，一眼就可以看到的，除了这一点，我对它就一无所知了，我天真地以为只要认识它能给我实现什么样的效果就足够了，可事实却告诉我：“你这小子也太天真了，你千万别被网上一大堆的搜索结果骗了，虽然几乎所有的搜索结果长得都像孪生兄弟甚至一模一样，我相信他们也并没有说谎，但也请你相信我，他们只是在骗自己”。在文章的开头我们不妨看看网上一堆关于 meta 中name=”viewport” 的介绍，但我不想重新他们的话，可是不写又不行，那么好吧，我向你们低头了，但我这人有个小毛病，就是当我有的东西你也有的时候，我会把它做得比你更出色。好吧，我承认我刚才在吹牛逼，我们马上进入正题。

基本定义

如果你有在网上搜索过 name=”viewport” 的话，相信你对这个基本的定义已经有大概的了解，但好事不嫌多，少看一次不如再看一次。

Viewport 有道词典的解决是视口，观察孔的意思，那么在这里我们要怎么解释呢？这是一个问题，但这个对于我们理解 什么是Viewport 也没有多大作用，但作为中国人把它翻译成中文还是有必要的，我们不妨把 Viewport 叫作视窗。为什么是它，其实也没什么就是喜欢。

很多书籍把它翻译成视口，但有没有书把它翻译成视窗，这个就不知道了，毕竟是我自创的。所以以后不管你看到视口，还是视窗，它指的就是一个东西 Viewport 。

这个meta 标签是由苹果发明的，后明就慢慢地被其他的生产产商所接受了。于是就不知不觉地流行了起来。

Viewport 有几个属性你需要了解的

width：控制 viewport 的大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：与 width 相对应，指定viewport 高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：是否允许用户手动缩放。

看完上面的几个属性是不是觉得对 viewport 理解了，甚至觉得在viewport 的世界里如鱼得水。如果我对你说这只是 viewport 之旅的开始，你会不会觉得生活不再美好了？且慢，我们不妨一步一步来？
上面所说的其实只是 viewport 的基本概念，一点点皮毛而已，如果要对其作深入的了解，我们还得专门拿出点时间来跟他耗耗。

三个视窗

Viewport 虽然它只是一个单词，但它却囊括了三个方面。是哪三个方面呢？Viewport 分为：视觉视窗、理想视窗、布局视窗。怎么样这会儿傻眼了吧？宝宝不用怕，我们一个一个来。

视觉视窗

所谓的视觉视窗说白了就是设备的屏幕区域，换句话说就是用户通过屏幕所看到的页面内容。但它所对应的并不是指屏幕区域里的物理像素，而是CSS 像素。并且它所包含的 CSS 像素的数量也是随着用户缩放而有所改变。如果你想了解更多 CSS像素和设备像素（物理像素）的关系，你可以前往《设备像素，设备独立像素，CSS像素》进行深入了解。

理想视窗我们可以通过window.innerWidth | window.innerHeight来获得理想视窗对应的宽和高。

布局视窗

布局视窗跟视觉视窗不一样，它不是指设备屏幕区域，它是为了解决PC 端网站在移动端显示不佳的一个解决方案。布局视窗通常比设备屏幕宽得多，一般为980px，但也不是唯一，在不同的浏览器中也会有所不同如：在Safari iPhone中布局视窗的宽为980px，在Opera中布局视窗宽为850px ，在Android WebKit 中而已视窗宽为800px，而在万恶的IE中布局视窗宽为974px。说了一堆，这个而已视频到底是个什么玩意呢？我们来看一个图我想你就应该明白了。

我们可以通过document.documentElement.clientWidth | document.documentElement.clientWidth来获得布局视窗的宽和高。
注意：布局视窗的宽高值是在页面没添加viewport 时所获得的值。如果你给页面添加了viewport 并且 设置了width = device-width 时，通过上面的代码所获得的值就不是布局视窗的默认值了。

理想视窗

这个理想视窗是为了布局视窗而生的，为什么这么说，因为它是基于布局视窗的。他其实就是变了尺寸的布局视窗。理想视窗就是把布局视窗调整到合适的状态，让页面有最好的表面效果，这也是它名字的由来。设置了理想视窗用户就不再需要对页面进行缩放，因为浏览器已经帮你把页面调整到最佳的显示状态了。而你要做的就是告诉浏览器，你要他这么做就OK了。就下面这一段代码就可以让浏览器乖乖地把布局视窗调整到最理想的状态

当然了，如果你的网站是PC端的或者没有作响应式处理的。虽然布局视窗已经调整到最佳显示状态，但你所看到的网页还不是你想要的，因为整个PC页面都压缩到理想视窗大小了，内容基本都看不清。所在理想视窗是会对于移动页面的，这个要在移动设备上才能看到效果，如果在PC上通过浏览器的设备模式查看的话页面是不会挤在一起的，你能看到的是页面的一个部分，你可以通过滚动来查看页面中的不同区域。

闲言碎语

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

对于这行代码我们是不是每次都得把这五个属性都写上呢？答案肯定是否定的，例如：如果你添加了user-scalable=no 那么，minimum-scale=1, maximum-scale=1这两个属性就没必要追加了。因为你都已经禁止了用户缩放页面了，允许的缩放范围也就不存在了。但我们可以像下面这样使用属性的搭配来巧妙地实现禁止用户缩放页面的功能。

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

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

上面这两段代码效果是一样的，都是不允许用户手动缩放页面，只是在原理上有所区别。那么现在问题来了，既然有了user-scalable=no我们也没必要辛苦自己写成minimum-scale=1, maximum-scale=1, user-scalable=yes。

这里有一点需要注意一下，理想视窗会随设备转向而改变。什么意思？
我们拿Iphone 5s 来举个例子。Iphone 5s 尺寸为320*568。在竖屏模式下宽度为320px，而在横屏模式下宽度为568px。

看完这篇文章，你有什么收获？如果你只是看了，而没有跟着操作一遍，我想是不会有收获的，因为很多时候在脑子里想的东西，在真实的世界里又会以另一个方式存在。眼见为实，想象为虚，亲测才是知道。