问题标签 [pixel-density]

如果我仅以 W 为单位指定 srcset，浏览器是否认为高像素密度显示全分辨率或按比例缩小的分辨率？

例如对于此代码...

...一个真正分辨率为 2560 的 2x 像素密度显示器更有可能触发 2560w 图像加载，或者相反，它会触发 1200w 图像加载，因为它在浏览器中显示为 1280px 宽度显示？

我有 27' 4k 显示器，想在网页上显示 10 厘米，因为它代表现实世界中的真实尺寸。

我正在使用缩放设置为 175% 的 Windows 10。Chrome 控制台devicePixelRatio还说：1.75

如果我用物理规则测量，这实际上是屏幕上的 10.4 厘米。可能在如何将 10cm CSS 转换为物理设备方面存在一些偏差，但可以接近 10cm。

我不明白的是，如果我将缩放比例更改为 100%，那么 CSS10cm是6cm用物理标尺测量的。矩形在屏幕上可见较小。我注销了，甚至重新启动了我的机器，但结果是一样的。

CSS 10cm无论我在 Windows 显示属性中为显示器设置的缩放比例如何，都不应该相同吗？

我还简要地看了这篇文章：https ://www.html5rocks.com/en/mobile/high-dpi/ ，它解释了如何计算设备像素比以及与此相关的事情。

即使缩放为 100% 并且 devicePixelRatio 为 1，为什么浏览器不绘制10cm实际10cm？

我知道 devicePixelRatio 历史：

典型的全屏桌面显示器大约为 24 英寸，分辨率为 1920x1080。想象一下，如果该显示器缩小到大约 5 英寸但具有相同的分辨率。在屏幕上查看东西是不可能的，因为它们太小了。但是制造商现在一直在推出 1920x1080 分辨率的手机屏幕。

因此，手机制造商发明了设备像素比，以便他们可以继续推动手机屏幕的分辨率、清晰度和质量，而不会使屏幕上的元素太小而无法看到或阅读。

一种解决方案是用户以英寸为单位输入他/她的显示器对角线，然后我们手动计算 PPI（https://www.calculatorsoup.com/calculators/technology/ppi-calculator.php），但如果 CSS 支持mm，cm应该这样开箱即用？

我知道 javascript 不支持获取监视器对角线的 API，但我认为 Web 浏览器支持。

我正在尝试将视图呈现给 PrintedPdfDocument。正如预期的那样，页面的大小以 1/72 英寸为单位。因此，对于 A0 大小的页面（宽度 = 33.11 英寸），document.getPageWidth()返回 2384 (33.11 * 72)。页面画布宽度等于 1 个像素等于 1/72 英寸单位 - 因此，pageCanvas.getWidth()返回 2384。这在不同的设备上是正确的。到目前为止，一切都很好。

我面临的问题是，在不同的设备上，为同一视图生成的 PDF 文档看起来不同。在某些设备上，它在 PDF 页面上被拉伸，而在某些设备上，它按应有的方式呈现。

这里可能是什么问题？PDF的生成不应该与设备无关吗？我注意到这pageCanvas.getDensity()在不同的手机上是不同的。为什么手机屏幕密度会影响 PDF 页面画布的密度？

鉴于document.getPageWidth()1/72 英寸的数值 ==pageCanvas.getWidth()以像素为单位，不应该pageCanvas.getDensity()总是 72 DPI？在某些手机上是 320（正确显示的位置），而在其他手机上是 420（视图被拉伸的位置）。

有点卡在这里，所以非常感谢任何指针。提前致谢！

基本上我正在改变布局比例。我必须将当前布局比例更改为另一个比例。我在我的应用程序中使用了一个代码片段。

以下是一些输入及其受人尊敬的输出：

在输入值 50,60.0,65 和 69.9999 上，代码分别返回相同的输出 50,60.0,65 和 69.9999。但是当我尝试输入 70 和 80 时，代码分别返回近似值 69.99999 和 79.99999。问题是 - 为什么在 70 和 80 的情况下我得到这些近似值而不是精确值。可能还有其他一些情况。我试图在所有情况下获得准确的值。

我创建了 layout-sw600dp/layout.xml，它在设备 A 上看起来很棒。但是在设备 B 上，这个布局已经融化并且看起来很糟糕。我想知道我的布局在最坏的情况下看起来如何（正好是 600dp 宽度的屏幕）

我想创建具有该屏幕尺寸的模拟器，因此我将 100% 确定我的布局在 sw-600dp+ 手机上看起来不错。你知道它是什么尺寸吗？

另外，如果您能给我一个建议，如何在现代世界中支持多种屏幕尺寸，我将非常感激和高兴。

PS 我有 40 多个按钮的布局相当困难

我正在使用 onCreateOptionsMenu 方法在我的应用程序的 MainActivity 中创建一个带有图标的工具栏。我正在使用 Android Studio 的模拟器测试不同的屏幕尺寸和像素密度。文档指出， “根据

当前屏幕的密度，系统会使用您应用程序中任何特定于密度的资源。如果资源没有以正确的密度可用，系统会加载默认资源并根据需要放大或缩小它们。”

我已经尝试将我所有的矢量图标都放在默认的可绘制目录中，但是系统根本不会针对不同的屏幕尺寸或密度来缩放它们。onCreateOptionsMenu 也不会缩放工具栏或标题文本的高度。它应该吗？

正因为如此，我也尝试使用不同的密度桶来解决这个问题。但是，我遇到了一个问题，即共享相同密度桶的屏幕尺寸差异很大。例如，我在 Pixel 3（5.5 英寸手机）和 Pixel C（10 英寸平板电脑）上进行测试。他们使用相同的密度桶 (xhdpi)，所以如果我在手机上使用 24dp x 24dp 图标，那么它在平板电脑上看起来太小了。我该如何解决这个问题？

我正在使用这个 android库中的文本贴纸。这是textsticker类的代码

我正在尝试将 textsticker 的坐标保存在父框架布局（lib 的 Sticker View 类）上。我将文本大小保存为 SP。然后在不同的设备上加载相同的坐标时，我将 sp 转换为 px。但问题是贴纸由于某种原因在 x 轴上偏移。基本上，即使我使用 SP 作为单元，它也不会在不同的设备上产生相同的结果。

这是保存坐标的代码

这是加载坐标的代码

我对这个库中的 Drawable Sticker 类有同样的问题。但是我通过将位图的密度设置为设备的密度来解决它。但是在 textsticker 中没有位图。静态布局正在画布上呈现。我试图设置静态布局的密度，但它没有任何这样的方法或属性。

知道为什么会这样吗？

我的 CodenameOne 应用程序需要为某些按钮定制图标。必须使用图像。

我的应用程序的 iOS 版本以 1x 2x 3x 格式适当地提供了这些图像。

看来CN1的多图系统会受益于我的应用程序Android版本的图像资源。

事实上，我认为 XCode 1x、2x、3x 图像可能会导致“最接近的替代方案”的奇怪分配，因为它在 CN1 开发指南中读到。

如您所见，上表与 Android 资源方案兼容。

但

在我的 Android 项目中，我没有图像，但是有 xml drawables。这些绘图从 SVG 绘图转换而来，由 Android-Studio 中简单直接的导入功能提供。

所以我在这里问是否有一种安全的方法将XCode项目的Assets.casset图像资源包含到CN1图像资源中。它们以 1x 2x 3x 图像的形式提供，并且最终必须分配给正确的 iOS 设备，没有错误但“最接近的选择”。

这可能吗？

我知道以前有人问过，但我找不到解决问题的方法

两个设备的大小相同 2650 * 1600 px

一个尺寸为 10.5" 的有 287 ppi

其他尺寸 11" 有 276 ppi

据我了解，这些丝束具有相同的密度组，但屏幕上的元素不能很好地对齐，谁能帮我创建一个单独的dimens.xml？

谢谢！

很长时间以来，我使用图片元素来响应每个视口不同尺寸的图像。它工作得很好，但现在我被迫切换到响应<img>式srcset并且sizes我尝试将我的图片元素重写为 IMG 样式。

经过长时间的搜索，我在以下位置找到了很好的文档：

https://www.dofactory.com/html/img/sizes 和更多细节在： https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

带图片的代码是这样的：

我将其重写为这样的响应式 img：

这似乎在浏览器的第一次测试中效果很好。但后来我注意到在移动设备上它加载了太大的图像。

原因是某些移动设备的像素密度不同，如 a-complete-guide-for-responsive-images 中所述

您也可以使用 Firefox 的开发工具来模拟它：

我试图通过将代码更改为来解决此问题

不起作用...（它总是为所有视点加载最小的图像）

我从使用 img srcset 处理响应式图像中尝试了没有媒体查询大小的解决方案

不像我需要的那样工作......

所以最大的问题是，如何组合宽度和密度的选择器。

在我的示例中，它应该加载：

• 740.jpg 用于宽度 0-740
• 1280.jpg 适用于宽度 740-980
• 1600.jpg 用于宽度 980-1280
• 1920.jpg 用于更大的一切

而且我不希望它为像素密度更大的设备加载更大的图像。

我知道 Stackoverflow 中有很多类似的问题，我正在寻找数周的工作解决方案，但似乎没有什么能像预期的那样工作，所以我希望有人能提供解决方案

更新： 我发现，有一个讨论这个问题的 gitlab 问题。

（请参阅响应式图像导致性能问题）

但目前看来，这个问题还没有最终的解决方案。

如果有人能提供新的想法，我会很高兴。