本章节介绍一下devicePixelRatio设备像素比是一个什么概念,让阅读者能够理解它的含义是什么,并不会对当前设备做过多介绍,因为设备总是不断推陈出新,掌握概念要比单纯的了解几种当前设备的参数要重要的多。
建议事先参阅什么是设备独立像素一章节。devicePixelRatio属性属于window对象,也就是相当于window.devicePixelRatio属性。
它可以返回只一个数字,用来表示设备物理像素和设备独立像素的比例。
计算公式如下:
1
|
window.devicePixelRatio = 物理像素 / dips
|
在iphone4以前的手机上,垂直横向的物理像素是320px,设备独立像素也是320px,那么devicePixelRatio返回值就是1。
当发展到iphone4以后,开始采用视网膜设备,就拿iphone4来说事,垂直横向的物理像素是640px,但是它的设备独立像素依然是320px,那么devicePixelRatio返回值是2,这当然是为了更好用户阅读体验和前端设计的方便,下面看一个代码实例:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE HTML>
<
html
>
<
meta
charset
=
"utf-8"
>
<
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
>
|
原文发布时间为:2017-2-17
本文作者:admin
本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落