背景：
最近就遇到一個同僚的項目，還是像平常一樣小心切圖，認真對像素。
一切測試都沒有問題，順利上線。
但是，上線之後，産品經理跑過來說，有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就成。
之後測試頁面的時候點選這個選項。
下面就是看是看頁面樣式了。
可以看出二倍的樣式順利讀取出來了。
優點：
1、移動端頁面的高度方法相同
2、不用找專門的高清retina屏裝置
缺點：
1、無法對比一倍的圖和二倍圖之間的差别，視覺上不直覺。
2、和測試及産品無法解釋相關的原理性東西。
方法二：
直接按住ctrl+滑鼠滾輪上滾，或ctrl+'+'，把浏覽器的視口放大到150%以上。
這個時候，可以在控制台裡輸入
window.devicePixelRatio
1.5
發現什麼了devicePixelRatio是1.5了。
同樣的可以讀取1.5及以上的适配代碼了。
但這個時候，有雙倍适配和沒有的，之間就可以清楚地看出來對比了。
1、方法更加直覺，可以重制在retina屏上的視覺觀感，可以重制上面bug的描述。
2、好給産品及測試解釋
3、裝置要求低，普通電腦都可以用來開發和調試
1、頁面放大後出現橫滾，整體頁面無法顯示全
總結：
裝置硬體越來越好，以後說不定都要設計雙倍的圖示。
對于設計師水準高的，可以要求設計出矢量圖（IE低版本沒法）
也可以直接用字型做圖示（所有版本都支援，但也會出現連續模糊的問題）
想想之前那麼多頁面都要去适配，工作量很大，打開了潘多拉盒子的感覺。
版權聲明
翻譯的文章，版權歸原作者所有，隻用于交流與學習的目的。
原創文章，版權歸作者所有，非商業轉載請注明出處，并保留原文的完整連結。