草庐IT

javascript - 将高分辨率图像提供给视网膜显示器

coder 2024-05-11 原文

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

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

最佳答案

为什么要设置 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属性(property)。

  • 优点: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/buttons/#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 设备在 Retina 中使用 1.5 作为高分辨率而不是 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 移动链接

关于javascript - 将高分辨率图像提供给视网膜显示器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13430828/

视网javascriptcodesectionhttpcssretina-display

有关javascript - 将高分辨率图像提供给视网膜显示器的更多相关文章

  1. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  2. ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2

    我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？ 最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。 关于ruby-on-r

  3. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  4. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  5. [工业相机] 分辨率、精度和公差之间的关系 - 2

    📢博客主页：https://blog.csdn.net/weixin_43197380📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正！📢本文由Loewen丶原创，首发于CSDN，转载注明出处🙉📢现在的付出，都会是一种沉淀，只为让你成为更好的人✨文章预览：一.分辨率（Resolution）1、工业相机的分辨率是如何定义的？2、工业相机的分辨率是如何选择的？二.精度（Accuracy）1、像素精度（PixelAccuracy）2、定位精度和重复定位精度（RepeatPrecision）三.公差（Tolerance）四.课后作业（Post-ClassExercises）视觉行业的初学者，甚至是做了1~2年

  6. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库？ - 2

    有这样的事吗？我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外，Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6510445/

  7. ruby-on-rails - 使用 Dragonfly 从 URL 分配图像 - 2

    我正在使用Dragonfly在Rails3.1应用程序上处理图像。我正在努力通过url将图像分配给模型。我有一个很好的表格:{:multipart=>true}do|f|%>RemovePicture?Dragonfly的文档指出:Dragonfly提供了一个直接从url分配的访问器:@album.cover_image_url='http://some.url/file.jpg'但是当我在控制台中尝试时:=>#ruby-1.9.2-p290>picture.image_url="http://i.imgur.com/QQiMz.jpg"=>"http://i.imgur.com/QQ

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. Ruby-vips 图像处理库。有什么好的使用示例吗？ - 2

    我对图像处理完全陌生。我对JPEG内部是什么以及它是如何工作一无所知。我想知道，是否可以在某处找到执行以下简单操作的ruby​​代码:打开jpeg文件。遍历每个像素并将其颜色设置为fx绿色。将结果写入另一个文件。我对如何使用ruby​​-vips库实现这一点特别感兴趣https://github.com/ender672/ruby-vips我的目标-学习如何使用ruby​​-vips执行基本的图像处理操作(Gamma校正、亮度、色调……)任何指向比“helloworld”更复杂的工作示例的链接——比如ruby​​-vips的github页面上的链接，我们将不胜感激!如果有ruby​​-

  10. ruby-on-rails - 如何播种图像的路径？ - 2

    Organization和Image具有一对一的关系。Image有一个名为filename的列，它存储文件的路径。我在Assets管道中包含这样一个文件:app/assets/other/image.jpg。播种时如何包含此文件的路径？我已经在我的种子文件中尝试过:@organization=...@organization.image.create!(filename:File.open('app/assets/other/image.jpg'))#Ialsotried:#@organization.image.create!(filename:'app/assets/other/i

随机推荐