如何在普清的屏上调试CSS样式二倍图背景

背景：

最近就遇到一个同事的项目，仍是像日常同样当心切图，认真对像素。

一切测试都没有问题，顺利上线。

可是，上线以后，产品经理跑过来讲，有BUG。

BUG描述：（不认为是BUG）

前端页面上的图标是虚的。

环境：mackbook pro retina屏

现象：

给了一个截图

图标是虚的

BUG修复要求：

对图标进行修正，使在retina屏上图标依旧是清晰的。

分析：

到这里，作过移动端页面的都知道，这是没有双倍图呀。

修复方法：

第一步，让设计师出对应图标的双倍图

第二步，使用css的media query适配retina屏。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  /* 这里放对应的图标兼容！ */
}

第三步，对应图标样式添加，并在浏览器中察看效果。

上面三步完成，这个小的适配也算完成了。

痛点：

但通常工做环境是不会每人配置一台苹果的，至少咱们公司没有。

在修复的过程小的调试不免，这就要频繁用到机器。

机器很差找，只能用其余方法了。

看一下上面的适配的media query代码。

dervicePixelRatio，这个属性，

在chrome里可使用window.dervicePixelRatio，看页面对应的值。

retina 的macbook pro是 2.0

普清 的是1.0

方法一：

这时，能够能过chrome的移动端模拟功能，去看二倍图的设置状况。

设置以下：

添加一个新的设备。

配置主要是里面的device pixel ratio。只要大于你css里设置的最小device-pixel-ratio就成。

以后测试页面的时候点击这个选项。

下面就是看是看页面样式了。

能够看出二倍的样式顺利读取出来了。

优势：

一、移动端页面的高度方法相同

二、不用找专门的高清retina屏设备

缺点：

一、没法对比一倍的图和二倍图之间的差异，视觉上不直观。

二、和测试及产品没法解释相关的原理性东西。

 

方法二：

直接按住ctrl+鼠标滚轮上滚，或ctrl+'+'，把浏览器的视口放大到150%以上。

这个时候，能够在控制台里输入

window.devicePixelRatio

1.5

发现什么了devicePixelRatio是1.5了。

一样的能够读取1.5及以上的适配代码了。

但这个时候，有双倍适配和没有的，之间就能够清楚地看出来对比了。

优势：

一、方法更加直观，能够重如今retina屏上的视觉观感，能够重现上面bug的描述。

二、好给产品及测试解释

三、设备要求低，普通电脑均可以用来开发和调试

缺点：

一、页面放大后出现横滚，总体页面没法显示全

 

总结：

设备硬件愈来愈好，之后说不定都要设计双倍的图标。

对于设计师水平高的，能够要求设计出矢量图（IE低版本无法）

也能够直接用字体作图标（全部版本都支持，但也会出现连续模糊的问题）

想一想以前那么多页面都要去适配，工做量很大，打开了潘多拉盒子的感受。