其他分享
首页 > 其他分享> > lib-flexible 知识点整理

lib-flexible 知识点整理

作者:互联网

目标:解决移动端界面适配问题

 

观点:一、不同像素比的设备上的文字呈现出来的大小应该是一致的 

         二、ios设备的设备像素比分为1,2;android设备的设备像素比都为1

         三、以540为基准宽度,以width/10为根源素fontsize

         四、图片采用2x以上的

解决方案:

        一:将1/dpr设置为缩放比例且body上的fontsize设置为12*dpr,这样就能保证字体在不同设备像素比的设备字体一致

        二:都是经验之谈,减少不必要的工作量

        三:这个540其实是个经验值,或者最大值,这个经验是怎么得出来的呢?
目前主流手机最大的css像素尺寸,是540(比如devicePixelRatio为2,分辨率是1080x1920的手机),所以用了这个经验值。这样可以让在ipad横屏这种情况下浏览无线页面,不至于因为拉伸适配后体验太差。
换句话说,这个540像素值是手机屏幕能到达的最大宽度(在考虑dpr以后),如果有宽度超过540的情况,则说明该网页被显示在 dpr超过1的大屏安卓机、ipad、PC端上。这时候,就使用540这个宽度(代码里是dpr*540,除了iPhone不会有dpr超过1的情况出现,所以基本上就是540)作为默认宽度。然后将屏幕宽度除以10作为rem值(模拟vw/vh实现),应用在document元素上,并且将计算得到的rem值输出到全局变量以供调用。

       四:由于ios端dpr的值为2所以物理像素/css像素的值为2,意味者1个css占据一4个物理像素,一个CSS像素点实际分成了四个,这样就造成了颜色只能近似选取,于是,我们看上去就变得模糊了,反之位图图像质量是由单位长度内像素的多少来决定的。单位长度内像素越多,分辨率越高,图像的效果越好,所以要采用2x以上的图片。

 

其他:设置user-scalable=no在手机浏览器上面并不能生效,webview可以生效

         脚本禁止用户手动缩放:

     

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1)event.preventDefault();
}, false);
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300)event.preventDefault();
    lastTouchEnd = now;
}, false);

 

     

标签:知识点,dpr,lib,像素,540,宽度,flexible,event,设备
来源: https://www.cnblogs.com/zale-blogs/p/12426599.html