前言：當我在幾個多月前，第一次在移動設備上使用canvas繪制內容的時候，我驚然地發現我繪制的圖片以及文字居然都是模糊的！我的內心幾乎是崩潰的，因為那是我第一個使用canvas的項目，是一個基於微信端的音樂同步消除文字的HTML5小游戲。由於性能上要過關，所以那次我才決定要把canvas搬上戰場的。雖然那次的文字是模糊的，但項目還是上線了。我不甘心，所以那時我一連幾周都在抽時間研究解決方案。那么問題來了，為什么canvas繪制的內容會在移動設備（視網膜屏幕）上顯示模糊呢？在解答這個問題之前，先提出以下幾個問題：
問題一：什么是視網膜屏幕？
根據百科資料解釋，視網膜屏幕是指分辨率超過人眼識別極限的高分辨率屏幕。而人在一定距離時觀察屏幕，只要每英寸長度所能夠排列的像素（ppi）的數目超過了300個，人眼就無法識別了。現在我們使用的大部分移動設備屏幕都是視網膜屏幕，也就是將非常多數量的物理像素點壓縮在一個相對很小的屏幕之中。
問題二：什么是設備像素比？
設備像素比其實也就是devicePixelRatio，它是物理像素和設備獨立像素device-independent pixels (dips)之間的比值。由於視網膜屏都是具有很高的PPI，所以往往物理像素都會比設備的獨立像素要大。移動設備上兼容性良好，Chrome,Safari和UC等，基本上是基於Webkit的瀏覽器都支持，但IE和FF一些老版本不支持。以下是window.devicePixelRatio的支持情況：
它是一個只讀屬性，瀏覽器的支持度還是很高的。移動端基本上全面支持，就連安卓2.1和Safari3.1都支持，只有IE10及以下不支持。