高清屏解决方案

 发表于 2019-04-04

Retina屏图片适配

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

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

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

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

12345678 .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

1234567891011 $(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，必然会带来一些问题：

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

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

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

rem方案

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

1234567891011121314151617 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作为单位时，不同宽度屏幕下元素的大小表现是不一样的。

转载于:https://www.cnblogs.com/guochongbin/p/10762695.html

相关资源：DirectX修复工具V4.0增强版