当前位置:网站首页 >> 养生

用友iUAP马太航Html5屏幕适配解决

时间:2019-05-14 23:44:43 来源:互联网 阅读:0次

摘 要:开发者在开发HTML5应用时必须考虑所有屏幕尺寸和分辨率类型的应用场景,为移动应用做屏幕尺寸和分辨率的适配工作。

随着移动和HTML5的持续火热,移动市场出现出了大量基于HTML5开发的移动APP。由于移动市场的高速发展,移动设备的快速更新,使得市场上出现了种类繁多具有各种屏幕尺寸和分辨率的移动设备,开发者在开发HTML5应用时就必须考虑所有屏幕尺寸和分辨率类型的应用场景,为移动应用做屏幕尺寸和分辨率的适配工作。

想要为移动应用做屏幕适配首先要了解一些概念。物理像素,即屏幕上的小显示单元;装备独立像素,即由程序使用的虚拟像素(如CSS中的px);装备像素比,装备像素比 = 物理像素 / 装备独立像素,定义了物理像素与设备独立像素间的对应关系,简称dpr(device pixel ratio)。在不同屏幕上,CSS像素出现的大小(物理尺寸)是一致的,不同的是一个CSS像素对应的物理像素个数是不同的。举例来讲,普通屏幕的每个像素点与CSS中定义的像素点大小相同,但是苹果的retina屏幕一个CSS像素对应4个物理像素。因此,在开发应用时就需要对不同屏幕(高清和非高清)进行区分处理。就一张普通的图片(PNG、JPG、GIF等)来说,其小的数据单元称为位图像素。理论上,一个位图像素对应一个物理像素,这样图片才能完善的清晰展现,但是对高清屏幕(Retina)就会出现位图像素点不够的情况,这样会导致图片模糊。遇到这种情况,通常要准备两张图片,如一张200300(CSS px),并提供一张400600的高清图片,这样位像素点就是原来的4倍,在retina屏幕下正好与其物理像素点逐一对应,图片自然就清晰了。固然,具体要加载那种图片是有dpr来判断的,在JavaScript中,可以通过vicePixelRatio获得到当前装备的dpr,在css中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的装备,做一些样式适配。与图片问题类似,高清屏幕还存在一种失真的问题,即border:1px问题。对border:1px在所有屏幕中的物理大小其实是相同的(下图灰色区),但这怎能体现出高清呢?对retina屏幕来讲,一个 CSS像素由4个物理像素组成,因此其细的线条并不是1px,而是0.5px,如下图红色框。而一般情况下设计师想要的retina下border: 1px,其实就是1物理像素宽,这种更细粒度的划分也带来的视觉上的高清。

当然,除了高清上的适配,还存在着屏幕大小上的适配,即页面布局问题。目前解决该问题用的方案是使用相对单位(rem),主要工作就是针对不同屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。rem=ientWidth * dpr / 10,乘以dpr是由于页面有可能为了实现1px border缩放1/dpr倍(如果没有,dpr=1),除以10是为了取整,方便计算。可以通过JavaScript来实现,使用公式计算出基准值rem,然后写入样式,代码如下:

var dpr, rem, scale;

var docEl = cumentElement;

var fontEl = eateElement('style');

var metaEl = erySelector('meta[name="viewport"]');

scale = 1 / dpr;

dpr = vicePixelRatio || 1;

rem = ientWidth * dpr / 10;

// 设置viewport,进行缩放,达到高清效果

tAttribute('content', 'width=' + dpr * ientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 设置data-dpr属性,留作的css hack之用

tAttribute('data-dpr', dpr);

// 动态写入样式

pendChild(fontEl);

nerHTML = 'html{font-size:' + rem + 'px!important;}';

// 给js调用的,某一dpr下rem和px之间的转换函数

m2px = function(v) {

v = parseFloat(v);

return v * rem;

};

2rem: function(v) {

v = parseFloat(v);

return v / rem;

};

r = dpr;

m = rem;

那么如何在CSS编码中实现真实布局呢?举例来讲,一个针对iPhone6(rem=375 * 2 / 10 = 75)的高清视觉稿px,采用上面JS代码方案。如果有一块750300px的div,用less这样写:

// 例如: .px2rem(height, 80);rem在iphone6时为75

.px2rem(@name, @px , @rem){

@{name}: @px / @rem * 1rem;

}

.px2rem(width, 750);

.px2rem(height, 300);

转化成HTML就变成了104rem,再经过0.5的缩放,在屏幕中的实际现实的是375150px,这样就动态的生成了div的大小完成了适配过程。

HTML 5已成为移动发展的趋势,很好的解决屏幕适配问题只是其众多亮点之一,但是它也存在着性能不如原生运用之类的问题,相信随着其不断发展完善,HTML 5未来一定会成为前端的新标准。

经期延长量很多怎么办
月经周期紊乱怎么办
月经量少可以中药调理吗

相关文章

一周热门

热点排行

热门精选

友情链接: 行业资讯 微店官网网页版 行业资讯
媒体合作:

Copyright (c) 2011 八零CMS 版权所有 Inc.All Rights Reserved. 备案号:京ICP0000001号

RSS订阅网站地图