问题标签 [retina]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 为什么在使用 Retina 屏幕查看的网站上，低分辨率图像会显得模糊？
当我有一个 500 x 500 像素的图像时，图像在普通显示器上看起来很清晰（即 CSS 像素 1:1 映射到设备像素）。但是当使用 Retina 显示器查看此图像时，它必须将图像的每个像素映射到 4 个视网膜像素（分辨率高一倍）。在视网膜显示器上，图像也以 500 x 500 CSS 像素显示，但缩放到 1000 x 1000。我不太明白为什么图像在 Retina 屏幕上看起来模糊，因为物理尺寸保持不变，因为两个显示器大小相同。
模糊是 4 个像素之间的空间的结果吗？
图片来自：http ://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
retina - mobify.js 可以用来创建视网膜友好的图像吗？
mobify.js 可以用来创建视网膜友好的图像吗？试图找到更多关于制作已经创建的视网膜友好图像的信息。
css - Internet Explorer 8 使用 Retina pixelratio 媒体查询
我正在使用 SASS/Compass 构建一个响应式网站，并且包含视网膜图标（使用生成的精灵）。我在我的 .scss 中包含了带有 mixin 的图标。
我的视网膜图标混合：
多变的：
用法：
我遇到的问题是 Internet Explorer 8 将我的视网膜精灵用作background-image，并且在background-size. 我知道 IE8 不支持background-size所以它被忽略了，但这意味着我的图标定位不正确。
使用 javascript 你可以找出你当前的像素比率：
此警报：undefined在 Internet Explorer 中。为什么我的“视网膜媒体查询”接受undefined为有效数字，并执行它的 css？有什么解决方法吗？
android - 在 Nexus 10 上检测视网膜屏幕并使用高分辨率精灵 XXX_2x.png
我正在使用 Telerik 的 Kendo UI 框架开发一个 Android 应用程序。该应用程序在高密度视网膜屏幕 (Nexus 10) 上运行，剑道精灵看起来非常小。
文件夹中有一个高密度精灵 PNG - 例如：sprite.png 和 sprite_2x.png - 但似乎 Kendo 框架服务于低分辨率版本，尽管我在高分辨率屏幕上。
当我在应用程序中运行 : alert(window.devicePixelRatio) 时，我得到了值 2（高分辨率屏幕），但我仍然得到了低分辨率 sprite.png。
在 CSS 样式表中，有一个使用高分辨率精灵的定义
在 HTML 文件中，元视口定义如下：
有人知道可能是什么问题吗？
非常感谢
safari - 如何为 Safari 阅读列表链接 Retina favicon？
我创建了各种尺寸的网站图标。它在我的 Retina MacBook Pro 上的地址栏中看起来很棒，但 Safari 阅读列表中的图标是像素化的。我的印象是它使用 32 像素的版本，但在 Retina 显示屏上是 64 像素。我的图标包含该分辨率，但图标仍然模糊。
创建和链接此图标以在 Retina 上看起来很棒的正确方法是什么？
javascript - 为视网膜和非视网膜显示器创建背景图像
情况
HTML 页面背景图像应显示在固定位置，填满整个屏幕或窗口（在非平板电脑、非智能手机设备上）。
背景图像是使用ImageShack创建的。到目前为止没有任何问题。
我创建了一个Plunk来展示当前的进展。
问题
在非视网膜设备（戴尔笔记本电脑）上，图像似乎渲染得很好，填充了页面的整个背景。
在我的 iPhone（视网膜）上，图像绝对不会显示为高分辨率图像。
我目前的解决方案
此示例中使用的 JavaScript 代码如下：
问题
- 应该使用哪些 CSS 设置来设置高分辨率的“视网膜”背景图像？
- 如何在 iPhone 上创建填充整个（可见）屏幕的背景图像？
更新：我的解决方案
尽管mcmac 的回答带来了一些见解，但这并不是我想要的答案。我只是想了解如何设置背景图像的参数，以便在视网膜屏幕上显示高分辨率图像。
解决方案非常简单。
a) 使用背景尺寸
使用background-size时，实际图像必须是屏幕大小的两倍（在每个方向上），并且background-size属性必须具有屏幕大小（与我所做的相反：屏幕大小的一半）：
b) 使用固定图像
正如R3tep 建议的那样，我可以使用普通的固定图像代替背景图像。在这种情况下，图像的大小必须是屏幕上图像大小的两倍，并且 css 必须是height: 100%; width: 100%.
javascript - 网站太大，无法显示 Retina
我的网站在 Retina 显示屏上看起来很大。所有字体和 div 元素都比我在 Chrome 中看到的要大。知道如何解决这个问题吗？
ios - 下载图像和视网膜显示
如果我从服务器下载一些图像，我应该调整它的大小以支持视网膜设备吗？
如果现在我不能使用 -@2x，我该如何设置正确的图像来显示？
更新：
如果我缓存图像，我需要在下载后和缓存之前调整图像大小，并缓存 2 个图像，常规和@2x？
wordpress - Wordpress 图像大小 - 调整大小后缩放和裁剪奇数像素
我对大图像尺寸的设置是 max-height: 1024 和 max-width: 1024
当缩小到 1024 宽度时，一些图像最终具有奇数高度（683 像素）。有没有办法解决这个问题 - 即按比例缩小，如果另一侧的高度/宽度为奇数，则裁剪掉一个像素。