高清屏及适配不同设备的方案总结

Posted 2020-08-15 前端[色色]

关于一些Retina，设备像素，移动适配的知识，网上一搜也是一大把，但是基本的东西并没有变化太多。下面就我看过的一些有关于这方面的知识做一些总结（仅以个人的角度出发，所以有不全的地方还请大家谅解）。后面会有不定期的更新~每个知识点我都会在开关写出引用地址，所以大家有不懂的可以看原文章~

一、关于设备像素比（devicePixelRatio）

出处：高清屏概念解析与检测设备像素比的方法

所谓设备像素比（devicePixelRatio）指的就是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

基本公式就是：devicePixelRatio = 屏幕物理像素/设备独立像素 //在某个方向上，x或者y

屏幕物理像素：就是我们经常所说的分辨率，如iphone 6 的分辨率就是750x1334

设备独立像素：就是手机的实际视窗，如iphone 6的视窗就是375x667

所以iphone 6的设备像素比 = 750/375 = 2

当devicePixelRatio值等于1时（也就是最小值），那么它普通显示屏

当devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清显示屏。

 

二：适配方案

出处：高清屏概念解析与检测设备像素比的方法

1.Media Queries媒体查询（只能用于背景图片）

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

2.javascript的解决方案

使用js对“window.devicePixelRatio”进行判断，然后根据对应的值给Retina屏幕选择图像。

 1 $(document).ready(function(){
 2   if (window.devicePixelRatio > 1) {
 3     var lowresImages = $(‘img‘);
 4 
 5     images.each(function(i) {
 6       var lowres = $(this).attr(‘src‘);
 7       var highres = lowres.replace(".", "@2x.");
 8       $(this).attr(‘src‘, highres);
 9     });
10   }
11 });

3.使用SVG矢量图像