问题标签 [devicepixelratio]

在 CSS 媒体查询中，您可以使用,(for "or") andand来匹配媒体查询要求。例如：

但是，如果您想在同一个媒体查询中混合and使用,怎么办？一个好的用例min-resolution是并非所有浏览器都支持。你必须做这样的事情：

在这种情况下，任何这些要求都需要匹配媒体查询才能生效。

所以现在，如果我想min-width: 768px在媒体查询中也需要，我该怎么做？是否可以将“或”查询组合在一起并用 分隔组and？像这样的东西：

上面的语法不起作用，但我认为它可能说明了我想要达到的目的。这有点像您如何使用括号将 SQLAND和OR查询组合在一起。(...)

可以用 CSS 做到这一点吗？

编辑：

这似乎可行，但似乎语法矫枉过正：

这是唯一的方法吗？

我的设备（Macbook Pro 2019 16"）的分辨率为 3072 x 1920。进入 CSS 领域时，像素单位被“标准化”。据我了解，每个 CSS 像素等于我window.devicePixelRatio的设备像素。就我而言，window.devicePixelRatio === 2. 如果我的理解是正确的，这意味着宽度为 的 CSS 网格列3072 / 2 = 1536px应该占据我的整个视口宽度。令人惊讶的是，情况并非如此：实际视口为1792px。

如果我将屏幕宽度除以视口宽度，这给了我一个“真实”设备与 css 像素的比率3072 / 1792 = 1.7142857142857142。为什么这不是返回的window.devicePixelRatio？

更令人困惑的是，当我使用 Chrome 的 API 截屏时，它会给我一个带有 width 的屏幕截图3584px。奇怪的是，所有这些数字似乎以某种方式结合在一起：(3584px * 1.7142857142857142) / 2 = 3072px这是我真正的设备宽度。这有什么意义？

最后，有没有办法以1.7142857142857142编程方式访问？

遇到一个问题是我的 img 标签结构如下

在 DPR 为 2x 的 Mac 上，Chrome 将仅以一半的高度和宽度显示 img

原始图像是 1000x1000，在 chrome 上它只显示 500x500

使用 css 很容易修复，但我很好奇为什么会这样？

基本上window.devicePixelRatio在 iframe 中使用时会显示错误的值。它在顶层显示 2.5，但在 iframe 中显示 2。

您可以在此处查看 iframe 中使用的值： https ://codepen.io/KennyLindahl/pen/wvBxjGb

现在在您的 devtool 控制台中键入window.devicePixelRatio并查看它与 iframe 中的值不同。

在 React 渲染方法中，一个基本的本地测试可能如下所示：

注意：我不能在 codepen 中编写window.devicePixelRatio因为它也是一个 iframe 并且会显示相同的结果。所以你需要在你的客户端 js 控制台中编写它。

有谁知道这个的解决方法或可以解释为什么会这样？

我正面临 css paint worklet 的问题，我想知道它是浏览器错误还是我做错了什么。在 worklet 中，我正在绘制几个矩形。如果其中一个覆盖了整个区域，那么当我更改缩放级别时，其他的就会开始消失。但是当我删除所有东西时，context.fillRect(0, 0, width, height)一切都像魅力一样。

这是我为更好地说明问题而准备的沙箱代码：https ://codesandbox.io/s/magical-villani-py8x2

假设 window.devicePixelRatio 和 device-width 是由显示器制造商设置的，并且可能返回不正确的值，是否还有其他可靠的方法可以准确计算显示器上物理像素的分辨率？

我将以我的手机（Samsung Galaxy S9+）为例，纵向它有：

• 屏幕分辨率：1,440 × 2,960
• 设备宽度：412
• 3.5的 devicePixelRatio

设备的物理像素宽度可以通过以下方式计算：device-width * devicePixelRatio

412*3.5≠1440

我愿意相信这些价值观中的任何一个都是错误的。也许物理像素的宽度确实是1442，或者设备宽度实际上是411.42857142857142857142857142857，或者 devicePixelRatio 是3.4951456310679611650485436893204。

无论哪种方式都不正确，我想知道这种不准确的发生频率，以及是否有任何方法可以解决该问题，而不必回退到手动更新的已知设备分辨率数据库。

我一直在尝试在画布元素上获得像素完美的直线。我已经尝试了许多针对其他 stackoverflow 问题和在 WebGL github repo 上打开的问题提出的解决方案。我仍然不确定我错过了什么。我正在尝试用代表当前缩进的三角形绘制标尺（如文字处理器标尺）。此标尺下方的文本段落应使段落的左缩进与标尺上三角形的位置相匹配。我已经成功地做到了，但并不是尺子上的所有垂直线都非常清晰，有些比其他的略粗。这是我针对这种情况的测试沙箱. 然而，在我的屏幕（具有 1.25 devicePixelRatio）上工作得非常好（关于清晰度）的唯一解决方案在不同 dPR 的屏幕上不起作用（关于标尺大小和与标尺的段落对齐）。适用于我测试过的所有屏幕的解决方案（关于标尺大小和段落与标尺对齐）在我测试过的任何屏幕上都不起作用（关于线条清晰度）。有什么想法可以让垂直线变得非常清晰吗？我当然可以忍受它们并不完美，但我相信最终当生成的图形 ui 界面像素完美时，它会带来更好的用户体验。

我不认为在这里发布 jsbin 示例中的所有代码很有用，但我基本上是在做 mozilla 网站上推荐的事情：

在我最初的任务中，我天真地着手制作一个与现实生活中的单位尺寸完全相同的尺子，直到研究我发现这目前是不可能的（并且被认为对网络标准并不重要）所以我放弃了尝试让尺子匹配现实生活中的单位英寸或厘米（由于此 UI 将成为 Google Docs 插件的一部分，我什至尝试测量 Google Docs 文档顶部的标尺，实际上它与实际单位英寸不对应） . 所以我给了标题“CSS 英寸尺子”，我放弃了尝试真正的单位英寸尺子，并接受了创建“CSS 单位英寸”尺子。但我现在的主要优先事项，除了保持段落和标尺同步之外，是获得像素清晰的线条......

从上述测试中选择“INCHES”和“更大的绘制精度（在我的 1.25 dPR 显示器上）”给了我这个结果： 但是该解决方案仅适用于我的 1.25 dPR 显示器，并且仅在绘制“INCHES”时才有效。

选择“推荐的绘图”（来自 Mozilla 网站的解决方案）使段落与所有显示器上的标尺很好地对齐，但给了我这种垂直线：

我尝试将上下文翻译 0.5，尝试通过 dPR 进行翻译，尝试将需要绘制的线的 x 位置四舍五入，但似乎没有任何效果。有些线条很清晰，有些则不然。（顺便说一句，我只在 Chrome 上进行了测试。）我已经尝试了在此评论末尾提到的 3 步过程，但无论是否舍入，无论是否翻译，都无法正常工作......

我没有尝试过此评论中提到的 getBoundingClientRect ，我不确定我将如何实现它，如果这可能是一个解决方案并且任何人都可以提供帮助，我将不胜感激。随意修改 jsbin 沙盒测试中的代码。

我一直在使用 Chrome 和 Firefox 开发工具测试不同的 DPR，似乎更改 DPR 对最终渲染没有明显影响。

我尝试了多个测试用例，包括真实照片和插图。我确保我使用的图像的分辨率明显低于在 2x 或 3x 显示器上呈现的分辨率。请参阅下面的示例并使用 Chrome 或 Firefox 开发工具中的响应工具来更改 DPR。我将图像的宽度设置为500pxCSS。图像的固有分辨率为 520 x 720 像素。因此，在@3x 设备上，它应该将该图像缩放到 1500 像素宽，使其看起来模糊。

我的显示器是否需要支持 3.0 像素比率才能模拟它？

要求： 所以我使用 html5 画布在 iPad(2732 * 2048) 上执行绘图并存储绘制的像素，以便我可以重复使用它们。

现在，我需要通过按像素重绘来在网站上显示与缩小版本 (615 * 460) 相同的绘图。

执行

我正在使用 fabric.js 来渲染画布。

缩小规模：

1. 将画布的高度和宽度乘以调整大小比例，以便将绘图缩放到原始大小。
2. 强制将容器的高度和宽度固定为显示图纸所需的尺寸。
3. 使用 CSS 将容器填充到其尺寸的 100%。

问题 在 Chrome 中渲染时，绘图有别名，但它在非视网膜显示器上的 Safari 中正确渲染。

也用纯画布测试过，它的行为是一样的。

在 Chrome 85 上绘图

在 Safari 14 上绘图

伪代码：（仅显示所需的设置和样式以避免复杂化）

HTML

谢谢

我正在尝试构建一个 UI，以使响应图像的定义和处理更容易一些。UI 在 iframe 中加载同域页面，以便具有类似于 Chrome 开发工具的设备模式下的响应模式的调整大小功能。也就是说，我有一个句柄，可以用来调整iframe的大小，对应于改变iframe中加载的页面的视口宽度。

它与基于 CSS 的媒体查询的预期完全一样，因为这些查询在调整 iframe 大小时会以像素精度生效。

但是，对于图像，情况就不同了。例如，我有一个尺寸为：300px、768px 和 1024px的图像。如果只定义了 srcset 而没有定义 sizes 属性，我希望浏览器在宽度超过 300 像素时加载 768 像素的图像，一旦超过 768 像素就加载 1024 像素。这不是我通过 UI 调整大小时看到的。相反，使用 300 像素的图像直到宽度超过 434 像素，使用 768 像素的图像直到超过 802 像素。因此，在这两种情况下，它甚至没有相同的因素不同。

如果我不是在 iframe 中加载页面，而是在浏览器中加载它并在开发人员工具中进入设备模式，那么当设备像素比设置为 1.0 时，这些变化完全符合我的预期。这告诉我浏览器（在本例中为 Chrome）正在执行一些可能与其感知/计算的设备像素比相关的计算。

在我工作的计算机上window.devicePixelRatio返回 1.1。我尝试使用这篇短文中描述的方法进行调整，但这并没有让我更接近解决方案。事情看起来很可疑，正如我上面提到的，这两个班次并没有因同一因素而有所不同，所以这不仅仅是调整比例的问题——据我所知。

有一个解决方案会很棒：有什么方法可以强制 Chrome（和其他浏览器最好）像 DPR 为 1 一样呈现页面 - 就像它在开发人员工具中主动设置时所做的那样？谢谢