移动前端第一弹：viewport详解

前言

此次想聊聊移动开发相关的事。是的，你没有看错，一句话就能够开始你的移动前端开发。

你内心必定在想，什么话这么酷，可以瞬间带入到移动前端开发的世界。

但其实它一点也不新奇，不复杂。

viewport简介

没错，就是viewport特性，一个移动专属的Meta值，用于定义视口的各类行为。

该特性最早由Apple引入，用于解决移动端的页面展现问题，后续被愈来愈多的厂商跟进。

举个简单的例子来说为何会须要它：

咱们知道用户大规模使用手机等移动设备来进行网页浏览器，其实得益于智能手持设备的兴起，也就是近几年的事。（还记得不久前的几年，满大街都仍是诺基亚的天下么？）

这时有一个很现实的问题摆在了厂商面前，用户并不能很好地经过手机等设备访问网页，由于屏幕过小。

layout viewport

Apple也发现了这个问题，而且适时的出现，它提出了一个方案用来解决这个问题。在iOS Safari中定义了一个viewport meta标签，用来建立一个虚拟的布局视口（layout viewport），而这个视口的分辨率接近于PC显示器，Apple将其定义为980px（其余厂商各有不一样①）。

这就很好的解决了早期的页面在手机上显示的问题，因为二者之间的宽度趋近，CSS只须要像在PC上那样渲染页面就行，原有的页面结构不会被破坏。

①的描述大体以下，数值不必定持续准确，厂商可能更改，但这个绝对值其实并不是特别重要：
iOS, Android基本都是: 980px
BlackBerry: 1024px

visual viewport

有了layout viewport，咱们还须要一个视口用来承载它，这个视口能够简单的认为是手持设备物理屏幕的可视区域，咱们称之为（视觉视口）visual viewport。这是一个比较直观的概念，由于你能看得见你的手机屏幕。

对于visual viewport，开发者通常只须要知道它的存在和概念就行，由于没法对它进行任何设置或者修改。很明显，visual viewport的尺寸不会是一个固定的值，甚至每款设备均可能不一样。大体列几种常见设备的visual viewport尺寸：

• iPhone4~iPhone5S: 320*480px
• iPhone6~iPhone6S: 375*627px
• iPhone6 Plus~iPhone6S Plus: 414*736px

以iPhone4S为例，会在其320px②的visual viewport上，建立一个宽980px的layout viewport，因而用户能够在visual viewport中拖动或者缩放网页，来得到良好的浏览效果；布局视口用来配合CSS渲染布局，当咱们定义一个容器的宽度为100%时，这个容器的实际宽度是980px而不是320px，经过这种方式大部分网页就能以缩放的形式正常显示在手机屏幕上了。

②的描述大体以下：
早期移动前端开发工程师常能见到宽640px的设计稿，缘由就是UI工程师以物理屏幕宽度为320px的iPhone4-iPhone5S做为参照设计；
固然，如今你还可能会见到750px和1242px尺寸的设计稿，缘由固然是iPhone6的出现

固然，为了更好的适配移动端或者只为移动端设计的应用，单有布局视口和视觉视口仍是不够的。

ideal viewport

咱们还须要一个视口，它相似于布局视口，但宽度和视觉视口相同，这就是完美视口（ideal viewport）。

有了完美视口，用户不用缩放和拖动网页就可以很好的进行网页浏览。而完美视口也是经过viewport meta的某种设置来达到。

说了这么一大堆的东西，貌似都和viewport有关联，那么viewport到底怎么搞，请继续往下。

关于3个视口，PPK已经作了很是棒的阐释，你也能够在StackOverflow上找到一些对此描述的相互补充，例如：[1], [2]，有兴趣的童鞋也能够看看

viewport特性

一般状况下，viewport有如下6种设置。固然厂商可能会增长一些特定的设置，好比iOS Safari7.1增长了一种在网页加载时隐藏地址栏与导航栏的设置：minimal-ui，不过随后又将之移除了。

Name	Value	Description
width	正整数或device-width	定义视口的宽度，单位为像素
height	正整数或device-height	定义视口的高度，单位为像素
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable	yes/no	定义是否容许用户手动缩放页面，默认值yes

width

width被用来定义layout viewport的宽度，若是不指定该属性（或者移除viewport meta标签），则layout viewport宽度为厂商默认值。如：iPhone为980px；

举个例子：

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

此时的layout viewport将成为ideal viewport，由于layout viewport宽度与设备视觉视口宽度一致了。

除了width以外，还有一个属性定义也能实现ideal viewport，那就是initial-scale。

height

与width相似，但实际上却不经常使用，由于没有太多的use case。

initial-scale

若是想页面默认以某个比例放大或者缩小而后呈现给用户，那么能够经过定义initial-scale来完成。

initial-scale用于指定页面的初始缩放比例，假定你这样定义：

1	<meta name="viewport" content="initial-scale=2" />

那么用户将会看到2倍大小的页面内容。

在说width的时候，咱们说到initial-scale也能实现ideal viewport，是的，你只须要这样作，也能够获得完美视口：

1	<meta name="viewport" content="initial-scale=1" />

maximum-scale

在移动端，你可能会考虑用户浏览不便，而后给予用户放大页面的权利，但同时又但愿是在必定范围内的放大，这时就可使用maximum-scale来进行约束。

maximum-scale用于指定用户可以放大的比例。

举个例子来说：

1	<meta name="viewport" content="initial-scale=1,maximum-scale=5" />

假设页面的默认缩放值initial-scale是1，那么用户最终可以将页面放大到这个初始页面大小的5倍。

minimum-scale

相似maximum-scale的描述，不过minimum-scale是用来指定页面缩小比例的。

一般状况下，为了有更好地体验，不会定义该属性的值比1更小，由于那样页面将变得难以阅读。

user-scalable

若是你不想页面被放大或者缩小，经过定义user-scalable来约束用户是否能够经过手势对页面进行缩放便可。

该属性的默认值为yes，便可被缩放（若是使用默认值，该属性能够不定义）；固然，若是你的应用不打算让用户拥有缩放权限，能够将该值设置为no。

使用方法以下：

1	<meta name="viewport" content="user-scalable=no" />

结语

正如开篇所说，这既不高深也不新奇，它而仅仅是一点观念转变。

当你掌握了viewport，那么意味着你已经大体了解了移动平台与PC平台的不一样，你能够更专一而细致的去解决某些平台差别问题。