Retina屏图片适配

高清屏解决方案

 发表于 2019-04-04

Retina屏图片适配

如果屏幕的dpr（device pixel ratio）大于1，则屏幕是高清屏，每一个css像素所对应的物理像素不止一个，比如：

  1. dpr：2，一个css像素对应4个物理像素
  2. dpr：3，一个css像素对应9个物理像素

那么如果想针对不同dpr的屏幕提供不同的图片，可以使用如下方案：

Media query（只能用于背景图片）

1
2
3
4
5
6
7
8
 
.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
    background-image: url(img_2x.png);
  }
}

Javascript

1
2
3
4
5
6
7
8
9
10
11
 
$(document).ready(function(){
  if (window.devicePixelRatio > 1) {
    var lowresImages = $('img');

    images.each(function(i) {
      var lowres = $(this).attr('src');
      var highres = lowres.replace(".", "@2x.");
      $(this).attr('src', highres);
    });
  }
});

Retina屏下0.5px边框问题

因为2倍屏下，1px是由两个物理像素点组成的，所以较1倍屏1px线看起来会粗一点。通常解决办法是在2倍屏下使用0.5px作为边框宽度。比如对于iphone5(dpr=2)，添加如下的meta标签，设置viewport(scale 0.5)：

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

然而，页面scale，必然会带来一些问题：

  1. 字体大小会被缩放
  2. 页面布局会被缩放(如: div的宽高等等

我们也可以使用css3，transform scale来进行元素的缩放，不影响其他元素，或者针对被缩小的元素再进行一次放大，比如

1
2
3
 
[data-dpr=2] div{
    font-size: 32px;
}

rem方案

某些情况下我们希望不同屏幕下的元素大小表现能够适应屏幕，比如一个大标题，在ip6 plus下大一点，ip5下就小一点，我们就可以利用rem的特性来解决。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
var currClientWidth, fontValue, originWidth
//originWidth用来设置设计稿原型的屏幕宽度（这里是以 Iphone 6为原型的设计稿）
originWidth = 375
__resize()

//注册 resize事件
window.addEventListener('resize', __resize, false)

function __resize() {
    currClientWidth = document.documentElement.clientWidth
    //这里是设置屏幕的最大和最小值时候给一个默认值
    if (currClientWidth > 640) currClientWidth = 640
    if (currClientWidth < 320) currClientWidth = 320

    fontValue = ((16 * currClientWidth) / originWidth).toFixed(2)
    document.documentElement.style.fontSize = fontValue + 'px'
}

这样，当我们使用rem作为单位时，不同宽度屏幕下元素的大小表现是不一样的。

posted @ 2019-04-24 15:36  深夜钢琴师  阅读(275)  评论(0)  编辑  收藏  举报