如何在普清的屏上調試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低版本無法）

也能夠直接用字體作圖標（全部版本都支持，但也會出現連續模糊的問題）

想一想以前那麼多頁面都要去適配，工做量很大，打開了潘多拉盒子的感受。