devicePixelRatio裝置畫素比介紹

admin發表於2017-02-17
dev
本章節介紹一下devicePixelRatio裝置畫素比是一個什麼概念，讓閱讀者能夠理解它的含義是什麼，並不會對當前裝置做過多介紹，因為裝置總是不斷推陳出新，掌握概念要比單純的瞭解幾種當前裝置的引數要重要的多。

建議事先參閱什麼是裝置獨立畫素一章節。devicePixelRatio屬性屬於window物件，也就是相當於window.devicePixelRatio屬性。

它可以返回只一個數字，用來表示裝置物理畫素和裝置獨立畫素的比例。

計算公式如下:

[JavaScript] 純文字檢視 複製程式碼
window.devicePixelRatio = 物理畫素 / dips

在iphone4以前的手機上，垂直橫向的物理畫素是320px，裝置獨立畫素也是320px，那麼devicePixelRatio返回值就是1。

當發展到iphone4以後，開始採用視網膜裝置，就拿iphone4來說事，垂直橫向的物理畫素是640px，但是它的裝置獨立畫素依然是320px，那麼devicePixelRatio返回值是2，這當然是為了更好使用者閱讀體驗和前端設計的方便，下面看一個程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<meta name="viewport" content="width=device-width">
<title>螞蟻部落</title>
<style>
div{color:red}
</style>
<script>
window.onload=function(){
  var odiv=document.getElementById("show");
  odiv.innerHTML=window.devicePixelRatio;
}
</script>
</head>
<body>
<div id="show"></div>
</body>
</html>

相關文章