在使用HTML5开发联通应用时，我们经常会遇到不同码率或者手机屏幕尺寸不同的问题。 如何才能让我们开发的应用或者页面大小适合各种手机呢？ HTML5 中的视口可以帮助您做到这一点。
移动浏览器将页面放置在虚拟“窗口”（视口）中。 一般来说，这个虚拟“窗口”（视口）比屏幕宽，这样就不需要将每个网页都挤进一个小窗口中（这会破坏未针对移动浏览器优化的网页的布局），用户可以平移和缩放以查看网页的不同部分。 中国联通的Safari浏览器最近引入了视口元标签，它允许Web开发人员控制视口的大小和缩放。 其他手机浏览器也基本支持。
据悉，在开发地图应用时，也需要用到Viewport，而整个地图往往比屏幕宽很多。
针对联通网页优化的页面常用的viewportmeta标签大致如下：
Viewport常用参数如下
宽度：
要控制视口的大小，可以指定一个值，例如 600，或者指定一个特殊值，例如 device-width，它是设备的长度（缩放到 100% 时单位为 CSS 像素）。
高度：
对应宽度，指定高度。
初始缩放比例是页面第一次加载时的缩放比例。 这是一个浮点值，是页面大小的一个因素。 例如，如果将初始缩放设置为“1.0”，那么在解释时，网页将以目标密度码率的1:1进行解释。 如果设置为“2.0”，页面将放大至2倍。
最大规模：
允许用户缩放的最大比例。 这也是一个浮点值，用于强调页面大小与屏幕大小相比的最大乘数。 例如，如果将此值设置为“2.0”，则页面相对于 targetsize 最多可以放大 2 倍。
最小规模：
允许用户缩放的最小比例。
用户可扩展：
用户是否可以自动缩放html5 屏幕大小，如果设置为yes，则允许用户更改，否则为no。 默认值为是。
所有缩放值必须在 0.01–10 范围内。
例子：
2. 设置屏幕密度为高频、中频、低频和手动缩放。 严禁用户自动调整缩放比例。
最大比例将被忽略，因为缩放根本不可能。
目标密度dpi：
屏幕的像素密度由屏幕帧速率决定，通常定义为每英寸点数 (dpi)。 Android 支持三种屏幕像素密度：低像素密度、中像素密度和高像素密度。 低像素密度屏幕每英寸像素较少，而高像素密度屏幕每英寸像素较多。 AndroidBrowser 和 WebView 的默认屏幕是中等像素密度。
device-dpi：使用设备的初始dpi作为目标dp。 不会发生默认缩放。
high-dpi：使用 hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi：使用mdpi作为目标dpi。 具有高像素密度的设备相应地放大，而具有像素密度的设备相应地缩小。 这是默认的目标密度。
low-dpi：使用mdpi作为目标dpi。 中等像素密度和高像素密度设备相应地按比例放大。
:指定一个特定的dpi值作为targetdpi。 该值的范围必须在 70–400 之间。
为了防止AndroidBrowser和WebView根据不同屏幕的像素密度缩放页面，您可以将视口的target-densisdpi设置为device-dpi。 当您执行此操作时，页面将不会缩放。 相反，页面将根据当前屏幕的像素密度显示。 在这些情况下，您还需要定义视口的宽度以匹配设备的宽度，以便页面适合屏幕。
视口参考
当今流行的手机系统包括Android、iPhone、Symbian、BlackBerry和WebOS。 这种系统浏览器是基于webkit核心的，而webkit是一款支持HTML+CSS+JavaScript的全功能联通浏览器。 但由于联通设备本身与PC的差异，我们开发的网页无法在联通设备上使用。 总会有一些不尽如人意的地方。
Viewport翻译成英文可以称为“视口”。 大家都知道，联通设备的屏幕比PC小很多。 webkit浏览器会将一个更大的“虚拟”窗口映射到中国联通设备的屏幕上。 默认的虚拟窗口窗口宽980像素（目前大多数网站的标准长度），然后按照一定的比例（3:1或2:1）进行缩放。 也就是说，当我们加载一个普通的网页时，webkit会首先按照浏览器980像素的标准加载网页，然后将其缩小到490像素的长度。 注意，这个缩小是全局缩小，即页面上的所有元素都会缩小。
那么我们可以人为地改变webkit的viewport吗？ 事实上，我们可以。 在 和 之间添加以下视口代码：
有没有更好的办法？ 例如html5 屏幕大小，我们手动检查联通设备的屏幕尺寸，然后使内容自适应。 很简单，看上面的代码：
