问题标签 [devicepixelratio]

我遇到了这个问题，1px 边框在视网膜显示器上看起来 2px，我知道这与 devicePixelRatio 有关，但仍然不明白为什么。

如果 1px 在 devicePixelRatio 为 2 的视网膜显示器上看起来是 2px，为什么 200px*200px 的图像看起来不像 400px*400px？

我的第二个问题是，如果我在 iphone 6(375*667) 上绘制一个宽度为 375px 的框，它只需要一半的屏幕。为什么？

例如 ：

我有固定大小块 250x250 像素的图像缩略图。和三个图像：

因此，浏览器选择 250w 用于 DPR：1.0 的设备，500w 用于 DPR：2.0 的设备和 750w 用于 DPR：3.0 的设备。

那么这些 DPR 1,2,3 对于人眼的视觉差异是什么？

我没有具有不同 DPR 的设备（iPhone 等）来查看此内容。当我在同一个显示器上执行此操作时，设备仿真无法向我显示这一点。

我最近在一个项目中添加了 DPI 缩放，以确保项目中的 UI 元素（使用画布绘制）在不同设备上具有合理一致的大小。起初这似乎可行，但在添加代码一天后，我突然在我的 4k 笔记本电脑上获得了大量的 UI 元素。我的高 DPI 移动设备和正常 DPI 桌面显示器以预期大小显示。令我困惑的是，在我实现 window.devicePixelRatio 的那个晚上，输出的值是“1”。但是今天，该值为“2.5”，我没有更改任何设置。

机器运行 Windows，默认设置为 %250 比例，自从我拿到笔记本电脑以来，如果我将其设置为 %100，DPI 输出将返回“1”。这不是很有帮助，因为一切都很小，包括 UI 元素。所有这些也适用于更改页面缩放。

问题最终似乎是尺度被应用了两次，所以对于所需的 n 标量，我得到 n^2。我怀疑问题出在浏览器级别以下，因为这台机器上的所有浏览器（Chrome、Opera、Edge、IE）在膨胀的 UI 元素上显示相同。

我需要弄清楚如何让我的计算机回到主显示设置设置为 %250 但 window.devicePixelRatio 返回值“1”的状态。我也很想知道为什么这首先会发生变化，这样我以后就可以避免它。

我的 html 页面中有以下声明。

定义了 2x 和 3x 的 x 描述符。我想创建一个等效的 css，以便我可以在此图像上放置文本。因此，我想将背景图像应用于元素，我们就称之为#showcase。

我发现以下 CSS 将以 2 倍的像素比率加载图像。

我的问题是什么是 3x 版本。显然 device-pixel-ratio 是 3，但是最小分辨率是多少呢？

我需要在桌面 Java 应用程序中获取设备像素比，以在 MacBook 视网膜屏幕上实现正确的行为。

该应用程序使用 Swing 和 JOGL。有没有办法通过 AWT 或任何 JOGL/JOGAMP API（如 NativeWindow 或 NEWT）来做到这一点？

JOGL 正在以全分辨率绘制图形，但 AWT MouseEvents 似乎在逻辑像素中，这是我遇到问题的根源。也许 NEWT 的Screen类知道物理分辨率，我可以将其与 AWT 报告的分辨率（我假设它以逻辑像素为单位）进行比较以确定设备像素比？但是如果有更简单的方法就好了。

我想了解为什么设备像素比因网站和不同的操作系统而异。例如，在同一设备上，该站点在 Windows / Ubuntu 上获得了不同的像素比。在 Windows 上，像素比为 1.34，而在 Ubuntu 上为 1。我想知道解决此问题的最佳方法是什么，以便在任何设备上获得一致的视图。

预期行为

在所有屏幕分辨率下，图像都应该看起来不错，没有模糊。在PC分辨率下看起来不错。

当前行为

图像在移动分辨率上看起来模糊。

这是我的代码

HTML

JS

密码笔

https://codepen.io/rajkumar-osm/full/ZPbOOe

我认为它与devicePixelRatio 有关，但我不知道在画布上绘制图像时如何考虑它。

我想将 SVG 渲染为 PNG。

我通过将 SVG 写入画布并将画布下载为 PNG 来做到这一点。

在具有视网膜显示器和 devicePixelRatio !== 1 的设备上执行此操作时，会导致图像模糊。

当渲染到屏幕上时，这很容易通过通过属性放大画布然后通过 CSS 缩小画布来解决。

但是，我想将画布下载为具有正确分辨率和大小的 PNG，我所能做的就是下载一个两倍于预期大小但在缩小时不模糊的 PNG，或者下载一个大小正确但模糊的 PNG。

这个Fiddle显示了问题，请注意您需要在 devicePixelRatio !== 1 的机器上（如 MacBook Pro 或 iMac）。

我编写了以下未按预期运行的媒体查询。变化发生在 1537 像素而不是 1024 像素。我正在使用 Retina 屏幕，此代码包含在使用 create-react-app 3 引导的项目中的 SCSS 文件中。

我做了一些研究，发现我的设备像素比是 3。这会影响我编写媒体查询的方式吗？

我的 CSS：

在我的 index.html 中：

非常感谢！！

I've created a design using Sketch and AI (adobe illustrator) and basing on that I've created the structure on flutter. The problem there is that the pixels and pt sizes on Sketch do not corresponding to the size of pixels (?) in Flutter. I know this happens because of pixelRatio but, there is a way to replicate exactly the same UI being pixel perfect? Is there a formula I can apply? Thanks in advance