移动端开发（一. Viewport(视窗)）

手机与浏览器

移动端开发主要针对手机，ipad等移动设备，随着地铁里的低头族越来越多，移动端开发在前端的开发任务中站的比重也越来越大。各种品牌及尺寸的手机也不尽相同。尺寸不同就算了分辨率，视网膜屏  自动的各种内核的浏览器，想想头都大了。

先说下浏览器。在中国有多少种浏览器？

ie、百度、360、搜狗、火狐、欧朋、Chrome、谷歌、行者无疆、财猫省钱、遨游、Wise光速、UC、智慧、QQ、海豚。。。（大概有70-80多种）

五花八门，还好不用担心这都是表象。虽然浏览器各不相同但从浏览器的内核来看基本分为四种：

浏览器内核：

1、Trident内核：IE最先开发或使用的，也称IE内核，360浏览器使用的也是IE内核。

使用IE内核的还包括：

• 世界窗（The World） 　　
• 傲游浏览器（Maxthon） 　　
• 腾讯TT（Tencent Traveler） 　　
• 帆浏览器（Avant Browser） 　　
• 360安全浏览器 （360SE） 　　
• 搜狗浏览器（兼容模式）（Sougou Explorer） 　　
• 瑞影浏览器（Rayying
• 等等

2、Webkit内核：谷歌chrome浏览器最先开发或使用，也叫谷歌内核，枫树浏览器、太阳花使用的也是谷歌内核。

3、Gecko内核： Netscape6开始采用的内核，后来的Mozilla FireFox (火狐浏览器) 也采用了该内核，K-Meleon浏览器也是使用这种内核。

4、Presto内核：目前只有Opera浏览器采用该内核。

聊完浏览器再来看下目前主流手机的屏幕分辨率及其屏幕尺寸：

分辨率：

Android：主流机型主要为 480x800, 480x854, 540x960, 720x1280, 800x1280 这五种。（非主流机型还包括：240x320, 320x480, 640x960 这三种，其中两种都与 iPhone 一致。）

iOS: 主流机型主要为 320x480, 640x960, 640x1136, 1024x768, 2048x1536, 这五种。WP：主流机型主要为 480x800，720x1280, 768x1280 这三种其

屏幕尺寸：

android：一般在4寸-4.8寸之间，也有小到 3.2寸的，也有5寸，7寸，10寸的。

iOS：3.5寸，9.8寸，4.0 寸，7.8 寸。

在流量最大的100种设备中，目前全球最流行的屏幕分辨率为1136*640，排在第二～五位的依次是1920*1080，960*640，1280*720，及800*480。

了解了手机与浏览器就能够有的放矢的去开发一款受欢迎的移动端应用了。但这么多设备如何下手？

1.Viewport(视窗)

什么是 Viewport?

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做”视区"

手机浏览器是把页面放在一个虚拟的”窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

简单点来讲：移动设备上的viewport就是屏幕上能用来显示我们的网页的那一块区域。

viewport不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

很显然viewport的宽度并不等于设备屏幕的宽度，滚动条和缩放页面也不是我们想要的效果。那么怎么办呢？改轮到meta标签收拾残局了。

开发移动端页面时，我们最常见的一个写法就是在head标签中加入：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”>

它的作用就是让设备的viewport的width等于设备的width;同时禁止了设备的手动缩放功能。

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持。

在meta viewport 中有6个属性，如下：

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

可以理解 “width=device-width”的作用就是把viewport的宽度变成了设备的宽度，无论竖屏还是横屏都一样。

回头看下为什么我们在手机上打开一个正常的pc端网站，在没有手动缩放的情况下，页面会自动缩小到适合手机的屏幕的尺寸？

因为在没有指定缩放值的情况下，移动设备会自动计算initial-scale的值保证 layout viewport 也就是页面宽度自动适配浏览器的可视宽度。。

总结：

1. 移动设备的viewport宽度和设备的屏幕宽度不相等，一般来说 viewport的宽度大于device-width。

　　　2.    在没有指定缩放值的情况下，移动设备会自动计算initial-scale的值保证 layout viewport 也就是页面宽度自动适配浏览器的可视宽度

　　　3.   http://viewportsizes.com 里面收集了众多设备的理想宽度。