理解移动端viewport

参考文档：Safari Web Content Guide

首先要弄清楚 三个视口 的概念，分别是：视觉视口、布局视口、理想视口 ##1.视觉视口 就是指用户的可见视野。 ##2.布局视口 或许你不知道'布局视口'这个概念，可是在移动端页面中，你确定用过下面这行代码。这行代码的做用就是设置布局视口。

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

布局视口主要是针对移动端而言，对于pc端而言，布局视口和视觉视口是一个概念。为何移动端会分开这两个概念呢？

移动端的浏览器在显示一个没有针对移动端特殊设计的pc端网页时，若是布局视口仍是采用视觉视口，那么空间严重不够。

下图是将一个宽度为980px的网页显示在布局视口分别为320px和980px的浏览器中。在布局视口为980px时，网页恰好显示完整，而在布局视口为320px时(好比在iPhone5下，布局视口采用视觉视口的大小)，只有灰色的方块部分可以显示出来，其余部分均须要用户移动网页才能看见。真是糟糕的体验。

会将网页缩小，方便移动端用户查看。这就是经过改变布局视口实现的，大多数浏览器会把这个视口设置为980px。你能够经过chrome的模拟器查看。

布局视口的大小就是给你的‘画布’大小，你的整幅画会完整的显示在视觉视口中（固然你不能把画绘制在画布外）。所以，一样大小px定义的元素，在移动端看到的会比pc端小。以下图，红色的方块

.test1{
            width: 200px;
            height: 200px;
            background: red;
        }

pc端：

移动端：

##3.理想视口 就是你们以为在该设备该浏览器下最理想的布局视口大小。浏览器产商有可能为不一样浏览器，或者同一浏览器在不一样设备下设置不同的理想视口。

##4.怎样设置布局视口 由于viewport这一律念最早由apple提出并使用，后来被其余浏览器采用。所以我翻译了apple对viewport设置的部分官方引导。

###4.1默认设置 默认宽度为980px，绝大多数网站均可以很好的显示。若是你的网站显示定义了宽度小于980px，就会以下图右边；若是你的网页的宽度大于980px，就会出现滚动条。解决方法很简单，设置viewport为你的网页宽度。so easy！！

###4.2修改布局视口 其实垂直滚动条在移动端已经很常见，用户也已经很适应。所以我以为只要设置布局视口的宽度就好。若是是专门的移动端网站、应用，建议将布局视口的宽度设置为设备的宽度，即：

<meta name="viewport" content="width=device-width">

对于一些短时间营销H5，咱们没有必要经过rem来作适配。只须要将布局视口写死，浏览器会自动在不一样的设备上进行缩放。

<meta name="viewport" content="width=640">

关于viewport的属性有不少，你没必要一一设置，下面将说明Safari怎样推断咱们没有设置的属性值。

##5.Safari怎样推断没有设置的属性值 ###5.1仅仅设置了initial scale为1 Safari on iOS会自动将viewport的宽度设置为设备宽度；若是用户横屏，它会将viewport的宽度设置为设备的高度。

###5.2仅仅设置了width为device-width 此时不管横竖屏，viewport的宽度都为device-width

###5.3设置了width和initial-width

##6.通用作法

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