html5构建触屏网站之网站尺寸探讨

网学网为广大网友收集整理了，html5构建触屏网站之网站尺寸探讨，希望对大家有所帮助！

本文分为两个部分，第一部分讨论跨平台网站的可行性，第二部分讨论viewport是如何设置的

开发跨平台网站？

靠标签的自适应宽高实现多尺寸通用！？

标签宽高可以自适应没错，我们很早就可以这么做了。但是你会发现很多pc端的传统网站还是会把宽度固定。（淘宝采用1000px宽度，搜狐950px...）为什么我们不让网站自适应宽高呢？那是因为，如果我们听任标签宽度被浏览器任意拉伸，将导致极差的体验：你不会希望当浏览器被缩放到100px时，你的左边栏变成了面条；也不会希望当浏览器被过度拉伸时，你的网站看起来像小学生的横格本。所以，靠标签的自适应来实现跨平台，是不现实的，是以牺牲用户体验为代价的。很多时候我们必须固定宽高。

依靠html5设备检测构建响应式网站！

我们依靠html5的设备检测查看当前设备是手机还是平板，并依此去加载相对应的css。举个例子来说：如果检测到你的设备是平板，我可以横着显示三栏，如果是手机的话，我就只显示一栏。这个听起来不难，但实现起来非常复杂，我们不仅要针对不同设备开发多套模版，还要对图片的尺寸进行处理。对此，我们可以看看波士顿环球报是如何借助HTML5实现响应式设计的。

总的来说，实现跨平台网站对大多数网站来说成本过高，限制太多，是否可行要结合网站实际情况。

viewport与网站尺寸

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

基本概念

（1） CSS pixels与device pixels

CSS pixels： 浏览器使用的抽象单位， 主要用来在网页上绘制内容。

device pixels： 显示屏幕的的最小物理单位，每个dp包含自己的颜色、亮度。

等值的 CSS pixels在手机屏幕上占多大的位置，这不是固定的，这取决于很多属性。经过分析和总结，我们可以得出这么一条公式： 1 CSS pixels = （devicePixelRatio）^2 device pixels （^2是平方的意思，至于 devicePixelRatio是什么东西，后面会讲解） 。

（2） PPI/DPI

PPI，有时也叫DPI，所表示的是每英寸所拥有的像素（pixel）数目，数值越高，即代表显示屏能够以越高的密度显示图像。（注：这里的像素， 指的是device pixels。）搞清楚了PPI是什么意思，我们就能很容易理解PPI的计算方式了，我们需要首先算出手机屏幕的对角线等效像素，然后处以对角线（我们平 常所说的手机屏幕尺寸就是说的手机屏幕对角线的长度），就可以得到PPI了。准确的计算公示大家可以参照下图。比较有意思的是，根据公式计算出来的 iPhone 4的PPI为330，要比苹果官方公布的326要高一点点。

同理，以HTC G7为例，480*800的分辨率，3.7英寸，算出来就是252的PPI。

（3） 密度决定比例

我们计算PPI就是为了知道一部手机设备是属于哪个密度区间的，因为不同的密度区间，对应着不同的默认缩放比例，这是一个很重要的概念。

由上图可知，PPI在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个上流的名字——retina）。

这些密度对应着一个特定的缩放比例值，拿我们最熟悉的iphone4或4s来说，它们的PPI是326，属于超高密度的手机。当我们书写一个宽度为 320px的页面放到iphone中显示，你会发现，它竟然是满宽的。这是因为，页面被默认放大了两倍，也就是640px，而iphone4或4s的宽， 正是640px。

图中把高密度的一类圈起来，是因为这是android手机的统计数据，在国内安卓手机市场中，高密度的设备占了绝大多数