您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > APP

移动端开发,不可不知的设备像素比devicePixelRatio

时间:2019-09-16 14:39:06  来源:  作者:
移动端开发,不可不知的设备像素比devicePixelRatio

 

evicePixelRatio其实指的是window.devicePixelRatio

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 公式表示就是:window.devicePixelRatio = 物理像素 / dips

dip或dp,(device independent pixels,设备独立像素)与屏幕密度有关。dip常用来辅助区分视网膜设备还是非视网膜设备。

可通过如下代码检测屏幕 window.devicePixelRatio的值:

window.onload=function(){
 alert(window.devicePixelRatio);
}

所有非视网膜屏幕的iphone在垂直的时候,宽度为320物理像素。当你使用<meta name="viewport" content="width=device-width">的时候,会设置视窗布局宽度(不同于视觉区域宽度,不放大显示情况下,两者大小一致)为320px, 于是,页面很自然地覆盖在屏幕上。

移动端开发,不可不知的设备像素比devicePixelRatio

 

这样,非视网膜屏幕的iphone上,屏幕物理像素320像素,独立像素也是320像素,因此,window.devicePixelRatio等于1.

而对于视网膜屏幕的iphone,如iphone4s, 纵向显示的时候,屏幕物理像素640像素。同样,当用户设置<meta name="viewport" content="width=device-width">的时候,其视区宽度并不是640像素,而是320像素,这是为了有更好的阅读体验 – 更合适的文字大小。

这样,在视网膜屏幕的iphone上,屏幕物理像素640像素,独立像素还是320像素,因此,window.devicePixelRatio等于2.

浏览器支持情况:

移动端开发,不可不知的设备像素比devicePixelRatio

 

IOS设备:

无视网膜设备devicePixelRatio值为1,视网膜设备为2. 因为实际的像素个数是双倍。不过,iphone似乎不愿意改变大家都熟知习惯的320像素宽度布局,没有把设备宽度一下子变成640像素,因此,dips宽度依然是320, 于是devicePixelRatio就是640/320 = 2.

iOS上的情况要相对简单些,除了1就是2. 在其他平台也基本上很简单,因为一般分辨率都比较挫,devicePixelRatio都是1.

Android设备

据我所知,谷歌的Nexus One是第一个使用dips的,比iphone还早。同时Galaxy Nexus以及Galaxy Note都是类运动视网膜显示器。近距离探究这三个设备应该会有所收获。

Nexus One分辨率是480*800, 为了最优的页面浏览,Android WebKit团队决定纵向手持时候的宽度依然是320像素,因此,devicePixelRatio值为480/320 = 1.5.

在同一手机上,Opera Mobile有相同的结论,dips为320宽,devicePixelRatio也是1.5

视网膜macBook

新的MacBook采用视网膜显示屏,其devicePixelRatio是(如果不出意外)2. 视网膜MacBook的物理像素是2800×1800,而显示出分辨率为1400×900,如果把分辨率作为dips层,则devicePixelRatio为2应该是无误的。

需要指出的是,如果你把分辨率改成1920×1200,devicePixelRatio依然是2. 严格来讲,这是不准确的,应该是1.5, 然而你也可以说MacBook的分辨率不同于dips层,这种情况下devicePixelRatio在台式机/笔记本下的定义就不一样(哪一个?不知道。)。

在任何情况下,根据苹果的规范做法,devicePixelRatio值只可能是1或者2. 如果你看到2,你要提供视网膜优化显示图片,如果是1,使用正常的图片

当页面设置了<meta name="viewport" content="width=device-width">时候,document.documentElement.clientWidth在大部分浏览器下,得到的是布局视区的宽度,等同于dips的宽度。

对于screen.width的值:

  • 在iOS视网膜设备上,screen.width返回dips宽。因此,在竖着显示的时候,视网膜显示屏的ipad和非视网膜显示屏的ipad返回的都是768.
  • 在上面提到的三个Android设备上,screen.width返回的是物理像素宽度,分别480, 720, 和800. 该设备上的所有浏览器都是该值。

Vasilis有一个很好的理论:苹果像素,因为它想使显示更清晰,更流畅,而Android厂商增加的像素在屏幕上塞进更多的东西。它解释了为什么苹果强调非视网膜视网膜的连续性,而Android集中在原始像素数。

总结:

了解了devicePixelRatio,我们就可以利用css3的媒体查询技术来针对非视网膜屏和视网膜屏使用普通图片和双倍图了。

.logo{
 background:url("../logo20X20.png"); 
 background-size:20px 20px;
}
@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
 background:url("../logo40X40.png"); 
}
@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
 background:url("../logo40X40.png"); 
}

最后:祝大家在像素世界里玩的开心!



Tags:devicePixelRatio   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
evicePixelRatio其实指的是window.devicePixelRatiowindow.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 公式表示就是:win...【详细内容】
2019-09-16  Tags: devicePixelRatio  点击:(448)  评论:(0)  加入收藏
▌简易百科推荐
  1、明确产品的需求分析+功能  这是最基本的也是第一步,我们要明确自己或者客户真的想要开发一款app应用,其次就要了解到底要开发什么功能什么类别和种类的app应用。所...【详细内容】
2021-12-27  木子科技    Tags:App   点击:(3)  评论:(0)  加入收藏
前言目前,即时通讯在app中逐渐成了不可或缺的功能,尤其是在疫情期间,音视频会议功能更是火了一把,但是想自己开发即时通讯功能,却一点都不简单,如果用原生开发的话,那么Android、iO...【详细内容】
2021-07-29  中控易动    Tags:APP   点击:(104)  评论:(0)  加入收藏
本篇博文将会提供一个关于如何使用WebRTC建立一个视频会议App的教程。我们不会将其设计的太复杂,它将会是一个简单的一对一视频会议App,并且仅仅使用了WebRTC APIs和一些其他...【详细内容】
2021-07-29  易简视源云会议    Tags:视频会议App   点击:(113)  评论:(0)  加入收藏
开发一款app需要多少钱?这是一个比较笼统的问题,没有确切的需求,拥有不同技术经验的团队往往报价都各不相同,因为不知道开发需求,所以无法给出一个准确的价格。因此,想知道app开发...【详细内容】
2021-07-13  hey衡道    Tags:app   点击:(79)  评论:(0)  加入收藏
Hybrid APP指的是半原生半Web的混合类App。需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web 。 原生是Native APP,H5就是Web App在Hybrid 当中,如...【详细内容】
2021-04-28  扣丁学堂  今日头条  Tags:APP页面   点击:(289)  评论:(0)  加入收藏
介绍MIP(Mobile Instant Pages - 移动网页加速器),是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页...【详细内容】
2021-04-12  爱分享Coder  今日头条  Tags:WebApp   点击:(309)  评论:(0)  加入收藏
在开发直播APP时,核心要素和基本要素是稳定性,一般各大服务商都有提供demo,并且可以免费测试的,测试可以初步评估下稳定性,看看视频流畅度如何,卡顿是不是很频繁,延时效果怎么样,视...【详细内容】
2021-03-19      Tags:直播APP   点击:(292)  评论:(0)  加入收藏
TOKEN作为用户身份凭证并不能保证数据安全,别人通过抓包等方式很容易拿到TOKEN,带上TOKEN请求我们的API接口就能获取数据;其实换一个角度想:我们只需保证即使TOKEN被别人冒用,也...【详细内容】
2021-02-18      Tags:APP,API   点击:(229)  评论:(0)  加入收藏
在当今移动互联网盛行的时代,网络的形态除了有线连接,还有2G/3G/4G/5G/WiFi等多种手机网络连接方式。不同的协议、不同的制式、不同的速率,使移动应用运行的场景更加丰富。目前...【详细内容】
2021-02-05      Tags:APP   点击:(201)  评论:(0)  加入收藏
虽然目前许多企业都进行了长沙APP开发,开始了移动互联网转型之路,但由于其中绝大部分企业都属于传统行业,对APP应用了解并不多,故而对开发工作也不是很清楚。为了大家能更好的了...【详细内容】
2021-02-01      Tags:APP应用   点击:(214)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条