关于移动端的viewport

当我们做移动端开发时，在页面的head标签中会看到这样的一个mate标签

要彻底理解这是干什么的，我们得先来看看几个基础概念

布局视口 layout viewport

我们知道在PC端，视口是和浏览器宽度相等的，但是在移动端，视口与浏览器的宽度（设备的宽度）不再是相等的，视口会独立于浏览器，我们把这个视口叫布局视口，我们写的css的样式都是基于布局视口的。

740839-20160516095648279-1391470156.png

为了容纳为桌面浏览器设计的网站，移动设备默认的布局视口宽度远大于屏幕的宽度，设置为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

视觉视口 visual viewport

视觉视口是用户正在看到的网站的区域，如下

740839-20160516095816998-625821523.png

缩放会影响视觉视口的大小。当缩放程度是100%时，视觉视口与设备屏幕一样宽。放大使视觉视口变得更小，因为屏幕上显示的CSS像素更小了，而缩小会让视觉视口更大，因为屏幕上的CSS像素更多了。因此缩放程度和视觉视口的大小是逆相关的：放得越大，视觉视口越小

理想视口

默认情况下，一个手机或平板浏览器的布局视口是980或1024像素。虽然这能让桌面网站不被压扁，但是这并不理想，尤其对于手机用户，因为在狭窄的屏幕上更适合一个狭窄的网站

布局视口很明显对用户十分的不友好，完全忽略了手机本来的尺寸。这就是为什么苹果和其他效仿苹果的浏览器厂商，会引进理想视口。它是对设备来说，最理想的布局视口尺寸。显示在理想视口中的网站拥有最理想的浏览和阅读的宽度，用户刚进入页面时也不再需要缩放（理想视口是浏览器厂商设定的，不同的浏览器理想视口存在差异）

//width=device-width  这句就是让浏览器的布局视口等于理想视口；

mate视口

meta视口标签存在的主要目的是让布局视口的尺寸和理想视口的尺寸匹配。它由apple发明，其他手机和平板复制了它的大部分内容。桌面浏览器不支持，也不需要它，因为它们没有理想视口的概念。
meta视口标签应该被放在HTML文档的中，并且按以下格式书写:

每一个名/值对都是一个给浏览器发号命令的指令。它们被逗号分隔，共有6个
1.width:设置布局视口的宽度为特定的值
2.initial-scale:设置页面的初始缩放程度
3.minimum-scale:设置了最小缩放程度(用户可缩小的程度)
4.maximum-scale:设置了最大缩放程度(用户可放大的程度)
5.user-scalable:是否阻止用户进行缩放
6.height:设置布局视口的高度
在桌面浏览器中，浏览器窗口就是约束CSS布局的视口。而在手机端，布局视口会限制CSS布局；视觉视口表示浏览器的可视区域，决定用户看到什么；理想视口是对于特定设备的特定浏览器的布局视口的一个理想尺寸