|
|
| Html 5 屏幕适配解决方案：马太航 |
|
|
|
|
Html5屏幕适配解决方案:马太航随着移动和HTML5的持续火热，移动市场涌现出了大量基于HTML5开发的移动APP。由于移动市场的高速
发展，移动设备的快速更新，使得市场上出现了种类繁多具有各种屏幕尺寸和分辨率的移动设备，开发者在开发HTML5应用时就必须考虑所有屏
幕尺寸和分辨率类型的应用场景，为移动应用做屏幕尺寸和分辨率的适配工作。想要为移动应用做屏幕适配首先要了解一些概念。物理像素，即屏幕
上的最小显示单元；设备独立像素，即由程序使用的虚拟像素（如CSS中的px）；设备像素比，设备像素比=物理像素/设备独立像素
，定义了物理像素与设备独立像素间的对应关系，简称dpr（devicepixelratio）。在不同屏幕上，CSS像素呈现的大小
（物理尺寸）是一致的，不同的是一个CSS像素对应的物理像素个数是不同的。举例来讲，普通屏幕的每个像素点与CSS中定义的像素点大小相
同，但是苹果的retina屏幕一个CSS像素对应4个物理像素。因此，在开发应用时就需要对不同屏幕（高清和非高清）进行区分处理。就一
张普通的图片（PNG、JPG、GIF等）来讲，其最小的数据单元称为位图像素。理论上，一个位图像素对应一个物理像素，这样图片才能完美
的清晰展示，但是对于高清屏幕（Retina）就会出现位图像素点不够的情况，这样会导致图片模糊。遇到这种情况，通常要准备两张图片，如
一张200×300（CSSpx），并提供一张400×600的高清图片，这样位像素点就是原来的4倍，在retina屏幕下正好与其物
理像素点一一对应，图片自然就清晰了。当然，具体要加载那种图片是有dpr来判断的，在JavaScript中，可以通过window.d
evicePixelRatio获取到当前设备的dpr，在css中，可以通过-webkit-device-pixel-ratio，-
webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio进行媒体
查询，对不同dpr的设备，做一些样式适配。与图片问题类似，高清屏幕还存在一种“失真”的问题，即border:1px问题。对于bor
der:1px在所有屏幕中的物理大小其实是相同的（下图灰色区），但这怎能体现出高清呢？对于retina屏幕来说，一个CSS像素由
4个物理像素组成，因此其最细的线条并不是1px，而是0.5px，如下图红色框。而一般情况下设计师想要的retina下border:
1px，其实就是1物理像素宽，这种更细粒度的划分也带来的视觉上的高清。当然，除了高清上的适配，还存在着屏幕大小上的适配，即页面布
局问题。目前解决该问题最好用的方案是使用相对单位（rem），主要工作就是针对不同手机屏幕尺寸和dpr动态的改变根节点html的fo
nt-size大小(基准值)。rem=document.documentElement.clientWidthdpr/1
0，乘以dpr是因为页面有可能为了实现1pxborder缩放1/dpr倍（如果没有，dpr=1），除以10是为了取整，方便计算。
可以通过JavaScript来实现，使用公式计算出基准值rem，然后写入样式，代码如下：vardpr,rem,scale;v
ardocEl=document.documentElement;varfontEl=document.createE
lement(''style'');varmetaEl=document.querySelector(''meta[name="v
iewport"]'');scale=1/dpr;dpr=win.devicePixelRatio||1;rem=
docEl.clientWidthdpr/10;//设置viewport，进行缩放，达到高清效果metaEl.set
Attribute(''content'',''width=''+dprdocEl.clientWidth+'',initi
al-scale=''+scale+'',maximum-scale=''+scale+'',minimum-scale
=''+scale+'',user-scalable=no'');//设置data-dpr属性，留作的csshack之用do
cEl.setAttribute(''data-dpr'',dpr);//动态写入样式docEl.firstElementChil
d.appendChild(fontEl);fontEl.innerHTML=''html{font-size:''+rem
+''px!important;}'';//给js调用的，某一dpr下rem和px之间的转换函数window.rem2px=f
unction(v){v=parseFloat(v);returnvrem;};window.px2rem:f
unction(v){v=parseFloat(v);returnv/rem;};window.dpr=dpr
;window.rem=rem;那么如何在CSS编码中实现真实布局呢？举例来讲，一个针对iPhone6（rem=3752
/10=75）的高清视觉稿750×1334px，采用上面JS代码方案。如果有一块750×300px的div，用less这样
写：//例如:.px2rem(height,80);rem在iphone6时为75.px2rem(@name,@px,
@rem){@{name}:@px/@rem1rem;}.px2rem(width,750);.px2rem(he
ight,300);转化成HTML就变成了10×4rem，再经过0.5的缩放，在屏幕中的实际现实的是375×150px，这样就动态的生成了div的大小完成了适配过程。HTML5已成为移动发展的趋势，很好的解决屏幕适配问题只是其众多亮点之一，但是它也存在着性能不如原生应用之类的问题，相信随着其不断发展完善，HTML5未来一定会成为前端的新标准。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
