移动端自适应处理--dpr

2023年3月27日 231次阅读 来源: stone_yao

可伸缩布局方案—这个只是手淘的一个插件
移动端高清多屏适配方案—主要参考的是这个

概念阐述：

1.物理像素（physical pixel）
一个物理像素是显示器（手机屏幕）上最小的物理显示物理单元，在操作系统的调度下，每一个设备都有自己的颜色值和亮度值。

2.设备独立像素（density-independent pixel）
设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素（比如：css像素），然后由相关系统转换为物理像素。

3.设备像素比（device pixel ratio）
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系
设备像素比＝物理像素／设备独立像素 （在x方向或者y方向）

要解决的问题：

1.retina和非retina手机图片显示问题
问题：普通屏幕下的图片显示在retina屏幕中可能会导致图片模糊。
解决：是在不同的dpr下，加载不同尺寸的图片。

2.border根据设计师的要求为retina下的border物理像素1px，此时的css像素应为0.5px,例如iphone5s;

<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">

此时因为页面scale缩小0.5,屏幕的适配布局问题可以使用rem用如下方式解决:

针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小（基准值）

1 rem=document.documentElement.clientWidth*dpr/10;

别人写的代码范例:

var dpr,rem,scale;
var docEl=document.documentElement;
var fontEl=document.createElement('style');
var metaEl=document.querySelector("meta[name='viewport']");

dpr=window.devicePixelRatio||1;
rem=docEl.clientWidth*dpr/10;
scale=1/dpr;

//设置viewport,进行缩放，达到高清效果
metaEl.setAttribute('content','width='+dpr*docEl.clientWidth+',initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');

//设置data-dpi属性，留作的css hack之用
docEl.setAttribute('data-dpr',dpr);

//动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML='html{font-size:'+rem+'px!important;}';

//给js调用，某一dpr下rem和px之间的转换函数
window.rem2px=function(v){
  v=parseFloat(v);
  return v/rem;
}
window.px2rem=function(v){
  v=parseFloat(v)
  return v/rem;
}

此时，字体也需要相应的进行处理（注意字体不要用rem，误差会比较大），此处写了一个@mixin进行处理

//定义一个mixin 根据不同dpr将px值转化成相应的dpr的px值。
/*
  @params $name 是css属性 比如width,top,font-size等
  @params $px 像素值
*/
@mixin px2px($name,$px){
    #{$name}:round($px/2)*1px;
    [data-dpr='2']&{
      #{$name}:$px*1px;
    }
    // for mx3
    [data-dpr="2.5"] & {
        #{$name}: round($px * 2.5 / 2) * 1px;
    }
    // for 小米note
    [data-dpr="2.75"] & {
        #{$name}: round($px * 2.75 / 2) * 1px;
    }
    [data-dpr="3"] & {
        #{$name}: round($px / 2 * 3) * 1px
    }
    // for 三星note4
    [data-dpr="4"] & {
        #{$name}: $px * 2px;
    }
}

总结:一般都不会用到处理css border-width:0.5px;的问题，所以为认为目前dpr需要处理的问题是retina屏幕下高清图片的显示问题，一般设置即可：

<meta name="viewport" content="width=devide-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
    原文作者：stone_yao
    原文地址: https://www.jianshu.com/p/3a07024963d9
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞