12

如何以跨浏览器兼容的方式检测访问网页的设备的像素密度，以便可以提供标准或高分辨率图像，而不会强制将图像加倍到任何设备？

是否有任何 javascript 库可以自动执行此操作？

4

3 回答 3

18

为什么要设置 Retina

iPhone 4s、iPhone 5、iPad3、iPad4、Macbook 15"、Macbook 13" 均使用 Retina 显示屏。

Android 还支持高分辨率显示，以及@JamWaffles 提到的 Windows 8（Lumia 920）。

添加高分辨率支持有利于用户体验，但它肯定会增加开发人员的负载，以及移动设备的带宽。有人不建议这样做。（Peter-Paul Koch，见底部“进一步阅读”）

布雷芬

有两种方法可以实现此功能。一种是Javascript，另一种是CSS。当前的所有解决方案都适用于 Retina，但可以轻松扩展到 Android 高分辨率。

CSS 解决方案是关于媒体查询和-webkit-min-device-pixel-ratio或-webkit-device-pixel-ratio

  • 使用简单。
  • 适用于所有浏览器。
  • 缺点：适合背景。<img>标签更难

Javascript 解决方案是关于window.devicePixelRatio属性的。

  • 优点：Javascript 可以操纵图像源。因此，如果您要提供直接图像而不是背景，最好使用 Javascript
  • 不能适用于所有浏览器，但目前的支持已经足够好了。请参阅下面的列表。
  • 需要多一点设置。

CSS 解决方案

对于普通图像，说一个图标

.sample-icon {
    background-image: url("../images/sample-icon.png");
    background-size: 36px 36px;
}

对于 Retina，请添加以下内容

@media only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
    (min-resolution: 192dpi) /* Everyone else */ {
    .sample-icon {
        background-image: url("../images/sample-icon-highres.png");
        background-size: 18px 18px;
}

你可以用min-resolution: 2dppx替换min-resolution: 192dpi，对于那些不想记住数字的人

注意区别：

  1. 两个不同的图标，一个正常，一个高分辨率。高分辨率图标比普通图标大一倍。
  2. 背景大小。后者是一半。但是您需要在实际使用中对其进行测试。

资源：+ http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/ + http://view.jquerymobile.com/master/demos/widgets/按钮/#CustomIcons

Javascript 解决方案

使用window.devicePixelRatio属性来检测分辨率。

if (window.devicePixelRatio >= 2) {
  alert("This is a Retina screen");
  //Do something to manipulate image url attribute
  //for example add `@2x-` before all image urls
}
浏览器支持

Safari、Android WebKit、Chrome 22+ 和 Android、Opera Mobile、BlackBerry WebKit、QQ、Palm WebKit，参考：http ://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html

安卓版

Android 设备使用 1.5 作为高分辨率，而不是 Retina 中的 2。 http://developer.android.com/guide/webapps/targeting.html --#Targeting Device Density with CSS, #Targeting Device Density with JavaScript

进一步的好读物

http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html “我不太喜欢提供特殊的视网膜图像，因为它会使网络过于繁重——尤其是通过移动连接。尽管如此人们会做的。” ——彼得-保罗·科赫

更新 2013-04-18更新 jQuery 移动链接

于 2012-11-17T13:32:28.200 回答
1

我找到了这个：

var retina = window.devicePixelRatio > 1;

这应该使视网膜返回 true，您可以使用 if 函数来提供正确的图像。

资料来源：http ://briancray.com/posts/detect-retina-displays-with-javascript

-InfiniDaZa

于 2012-11-17T13:06:06.517 回答
0

您需要了解网络功能、响应式图像和资源加载。

到目前为止，javascript 解决方案并不安静，因为它们通常需要在图像交换之前下载两个资源（图像）。

你最好的选择是后台 css 媒体查询，除非你使用这样的完整解决方案： http ://adaptive-images.com 在这里解释：https ://vimeo.com/38947881

于 2015-07-23T08:44:55.630 回答