问题标签 [pixel-ratio]

给定一个包含 1px 边框元素的简单页面（源代码如下），与 iOS 相比，它将在 Android 上呈现如下：

如您所见，Android 边框没有统一的宽度，有时为 1px 有时为 2px 宽。据我测试，这只发生在 CSS 像素比为 1.5 的设备（包括 Android 模拟器）上，而不是像素比为 2 的设备（包括 iOS）上。我相信这个问题是由亚像素抗锯齿和/或舍入问题引起的，但老实说，我不知道如何解决这个问题。

我使用媒体查询开发了几个网站，以使它们准备好视网膜。在 Firefox 上，我现在看到所有背景图像（由媒体查询管理）都是模糊的，不是视网膜准备好的。

这是正常的吗？为什么 Firefox 还不支持像素配比的媒体查询？

前任：

谢谢你的帮助。

我正在开发一个网站，并在其中使用媒体查询。我的示例查询如下所示

但是当我在黑莓上运行它时，它没有选择相应的 css 样式，当我将-webkit-min-device-pixel-ratiofrom更改1.67为 时1，它运行良好。

所以我的问题是，计算在分辨率下也能正常工作的像素比的正确方法是什么？

是否有定义 Google Chrome IMGsrcset属性大小对应的设备大小/分辨率的地图？

例如，在

什么尺寸/分辨率的屏幕将接收这些图像尺寸中的每一个？和/或有其他尺寸吗？

我对响应式图像感到困惑。在移动设备上查看时，设备像素比如何影响图像。

我有一个分辨率为 480x854 的移动设备，设备像素比为 1.5，即如果我发送宽度为 320px (480/1.5) 的图像，只要我们将视口指定为，它将自动适应浏览器的宽度，

如果我提供宽度为 480 像素的图像，它会超出浏览器的实际宽度。但是，如果指定这个，

它以浏览器宽度 100% 显示，质量明显高于 320px 图像。

那么，基于设备像素比显示图像的可行方法是什么？我必须为我的设备发送 320 像素或 480 像素（100%）的图像吗？

我制作了一个响应式网站，可以在不同的屏幕分辨率下正常工作。我使用了三种不同的媒体查询——从 0 到 640，从 640 到 960 及以上。无论如何，如果我尝试在使用 720x1280 的三星 Galaxy Note2 上打开，因为它的像素比为 2，它会将网站读取为 360x640 设备，但样式为 640-960。

我如何确定网站将以原始分辨率显示？

我在标题中包含了这个：

如果我在我的样式表文件中添加这样的东西

它在 Chrome 的仿真模式下工作正常，但如果我在真正的手机上测试它就不行。

编辑： Woo-hoo...我找到了一种使用 JavaScript 的方法。

它读取设备像素比率，然后设置该initial-scale值。

Google Chrome 的模拟功能要求您输入设备分辨率和设备像素比。它有 iPhone 5 的预设，但还没有 iPhone 6 或 iPhone 6+ 的预设。

你知道我应该为 iPhone 6 输入什么分辨率和像素比吗？

对于网站上的每个帖子，都会有一个标题图像。该图像的宽度为100vw，高度为300px。我想通过标签的srcset属性img或成熟的picture元素提供此图像的多个版本（此时不确定哪个版本，因此这个问题）。

这样做会很容易使用srcset属性：

当我想考虑不同的设备像素比率时，就会出现问题。首先，假设我拥有上面列出的所有图像的2x版本。3xsrcset

假设我有一部2x具有320px宽视口的手机（例如 iPhone 5）。我希望浏览器加载xs_2x.jpg. 同样，假设我有一个1x带宽屏显示器的桌面。我希望浏览器加载lg.jpg.

但是现在假设我有一部更大的手机，一个具有3x,414px宽视口的手机（即 iPhone 6 Plus）。在这种情况下，我希望我的浏览器能够加载sm_3x.jpg. 但是，我的浏览器可能会加载sm_2x.jpg，因为（1536 像素）的宽度比（2304 像素）sm_2x.jpg的宽度更接近手机的宽度（1242 像素）。sm_3x.jpg这将导致设备上的图像不300px高，从而打破网站的要求。

如何实现动态宽度、静态高度、具有 DPR 意识的响应式图像？

我正在为具有两个主要元素的页面设计响应式布局，并且我需要将其中一个隐藏在标准手机屏幕上（假设最多大约 5 英寸）。子条件是横向模式和最大 800 像素的屏幕宽度。通常智能手机很容易与普通显示器区分开来，因为它们具有更高的像素比 (> 1) 和/或分辨率 (>130dpi)。即便如此，通过 Chrome 开发工具进行测试，我还是遇到了一些像素比 = 1 和分辨率 = 96dpi 的手机，这些规格使它们与我的媒体查询无法区分为普通显示器：

如前所述，此媒体查询也会影响普通监视器。是否有任何其他规范可以用来分隔这些案例？

抛出一些关于此事的设备：

• 摩托罗拉 Droid 3/4/Razr/Atrix（540x960px；像素比：1；分辨率 96dpi）

• 摩托罗拉 Droid Razr HD（720x1280 像素；像素比：1；分辨率 96dpi）

• Sony Xperia Sola（480x854px；像素比：1；分辨率 96dpi）

谢谢你。