devicePixelRatio设备像素比介绍-CSDN博客

本章节介绍一下devicePixelRatio设备像素比是一个什么概念，让阅读者能够理解它的含义是什么，并不会对当前设备做过多介绍，因为设备总是不断推陈出新，掌握概念要比单纯的了解几种当前设备的参数要重要的多。

建议事先参阅什么是设备独立像素一章节。devicePixelRatio属性属于window对象，也就是相当于window.devicePixelRatio属性。

它可以返回只一个数字，用来表示设备物理像素和设备独立像素的比例。

计算公式如下:

 
          window.devicePixelRatio = 物理像素 / dips

在iphone4以前的手机上，垂直横向的物理像素是320px，设备独立像素也是320px，那么devicePixelRatio返回值就是1。

当发展到iphone4以后，开始采用视网膜设备，就拿iphone4来说事，垂直横向的物理像素是640px，但是它的设备独立像素依然是320px，那么devicePixelRatio返回值是2，这当然是为了更好用户阅读体验和前端设计的方便，下面看一个代码实例:

 
       <!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 
       > 
      