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手机的统计数据，在国际安卓手机市场中，高密度的装备占了绝大大都的市场份额，这是很主要的一点，也是咱们做安卓端webapp要注重的关头点。

viewport的操纵

viewport统共有5个属性，别离以下：复制代码代码以下:
<meta name="viewport"
content="
height = [ pixel_value |device-height] ,
width = [ pixel_value |device-width ] ,
initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value ,
user-scalable =[yes | no] ,
target- densitydpi = [ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] " />

在这些属性外面，咱们重点存眷target-densitydpi，这个属性能够或许转变装备的默许缩放。 medium-dpi是target-densitydpi的默许值，若是咱们界说target-densitydpi=device-dpi，那末 装备就会根据实在的dpi来衬着页面。打个比喻说，一张320*480的图片，放在iphone4外面，默许是占满屏幕的，但若是界说了target- densitydpi=device-dpi，那末图片只占屏幕的四分之一（二分之一的平方），由于iphone4的分辩率是640*960。

处理打算

（1） 简略粗鲁

若是咱们根据320px宽的设想稿去建造页面，并且不做任何的设置，页面会默许主动缩放到跟手机屏幕相称的宽度（这是由于 medium-dpi是target-densitydpi的默许值，和差别密度对应差别缩放比例所决议的，这统统都是挪动装备主动完成的 ）。以是这类处理打算，简略，粗鲁，有用。但有一个致命的错误谬误，对高密度和超高密度的手机装备，页面（出格是图片）会失真，并且密度越多，失真越利害。

（2） 极致完善

在这类打算中，咱们接纳 target-densitydpi=device-dpi，如许一来，手机装备就会根据实在的像素数量来衬着，用专业的话来讲，便是1 CSS pixels = 1 device pixels。比方对 640*960的 iphone，咱们便能够或许做出 640*960的页面，在iphone上显现也不会有转动条。固然，对其余装备，也需建造差别尺寸的页面，以是这类打算常常是操纵媒体查问来做成呼应式 的页面。这类打算能够或许在特定的分辩率下完善显现，可是跟着要兼容的差别分辩率越多，本钱就越高，由于须要为每种分辩率誊写零丁的代码。上面举个简略的例 子：复制代码代码以下:
<meta name="viewport"content="target- densitydpi =device-dpi, width=device-width " />
#header {
background:url (medium-density-image.png);
}
@media screen and (- webkit -device-pixel-ratio:1.5) {
/* CSS for high-density screens */
#header { background:url (high-density-image.png);}
}
@media screen and (- webkit -device-pixel-ratio:0.75) {
/* CSS for low-density screens */
#header { background:url (low-density-image.png);}

（3） 公道折衷

针对安卓装备绝大大都是高密度，局部是中密度的特色，咱们能够或许接纳一个折衷的打算：咱们对480px宽的设想稿停止复原，可是页面制却做成 320px宽（操纵background-size来对图片停止减少），而后，让页面主动根据比例缩放。如许一来，低密度的手机有转动条（这类手机根基上 已不人在用了），中密度的手机遇华侈一点点流量，高密度的手机完善显现，超高密度的手机轻细失真（超高密度的安卓手机很少）。这类打算的长处很是明 显：只须要一套设想稿，一套代码（这里只是会商安卓手机的情况）。