在今天，我们的生活已经离不开手机，自从有了Iphone和Android这两个牛逼的操作系统，APP成了不可或缺的生活应用，随之而产生的新名词Web App(意为基于WEB形式的应用程序)也进入了更多开发者和用户的日常生活。移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。

如果你是一名前端er，又想在移动设备上开发APP，首先我们需要了解webkit内核的浏览器，其中Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 等都是基于 Webkit 开发。在去年（2013年）的4月4日 谷歌星期三（4月3日）宣布，他们将利用 WebKit 渲染引擎开发自主的网页渲染引擎“Blink”。当然，这不是本篇文章的重点。

什么是Viewport

viewport：视口，视觉窗口，显示区域。

手机屏幕相对桌面显示器要小很多，如果用手机浏览大多网站时会出现水/垂直滚动条的问题，当然这不算什么大问题，甚至可以理解为合理现象；但如果是浏览流动布局的网页那情况会非常糟糕，设想一个宽 度为30%的侧边栏对于320px手机屏幕而言也就96px，只能容纳8个12px的汉字，可阅读性非常差。

为了让手机也能获得良好的 网页浏览体验，使用viewport meta创建一个虚拟的窗口(viewport)，而且这个虚拟窗口的分辨率接近于桌面显示器，在视觉窗口(visual viewport)中我们可以拖动横向竖向滑动条或者放大缩小网页，来达到最佳的浏览效果(类似桌面浏览器)；而布局窗口(layout viewport)用来配合CSS渲染布局，例如当我们设置一个容器的宽度为100%时，这个容器的实际值为980px而不是320px。如此一来大部分 网页就能以缩放的形式正常的显示在手机屏幕上了。

Viewport使用

width：控制 viewport 的大小，可以指定的一个值，如果320px，或者特殊的值，如 device-width 。这里解释一下device-width：字面意应该是viewport宽度等于设备宽度，但在实际中不同的浏览器都给出了个定值：320px；这个值还是源于 Apple，因为早期iphone的分辨率为320px × 480px，大量为iphone量身定制的网站都设置了viewport:width=device-width，并且按照宽度320px来设计制作，所 以其他浏览器加入viewport支持时为了兼容性也将device-width定义为了320px。
height：和 width 相对应，指定高度，通常不设置。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

下面给出常用Meta标签

link

Shortcut Icon 就是在网址列前面出现的Icon

IOS用rel=”apple-touch-icon”,android 用rel=”apple-touch-icon-precomposed”。这样就能在用户把网页存为书签时，在手机HOME界面创建应用程序样式的图标。

（未完待续 原创作品，转载请注明出处，如：作品来自：cheris官方博客）