问题标签 [pixel-ratio]

如何使用从 Markdown 生成的 HTML 在 HiDPI 显示器上显示图像，以便图像以高分辨率显示。通常，我会创建带有属性的<img>标签或在每个图像上适当地设置and或使用媒体查询。但是，Markdown 图像的结果只允许一个属性。具体来说，我正在使用标记库（我无法控制）。srcsetwidthheightalt

我确实可以完全控制 CSS。在 CSS 中，有没有办法至少使所有图像的逻辑像素宽度比物理像素宽度的 1/3？这样我就可以要求 Markdown 中引用的所有图像都是 3 倍。就这么简单吗？

更好的方法是让浏览器根据devicePixelRatio设备下载不同的图像。

使用 HTML 不是一种选择。标记与sanitize标志一起使用以转义任何 HTML。我希望有一个 CSS 解决方案或其他一些聪明的机制。

我正在开发的 Cordova 应用程序有问题。我使用 mdpi 设备进行测试，一切看起来都很好。我的宽度为 800，密度值为 1。我的视口设置如下：

现在，我在另一台设备 xhdpi 上安装了我的应用程序。我现在的问题是密度值为 2，屏幕宽度为 1200，我的 window.width 只有 600，这弄乱了所有应用程序，尤其是对于表格...

任何想法？非常感谢！

我有 5 张来自设计师 mdpi、hdpi、xhdpi、xxhdpi 和 xxxhpdi 的图片，因为我发现在 React Native 中我只能给出

1. 检查.png
2. 检查@2x.png
3. 检查@3x.png

我已经阅读了 react-native 中 android 和 iOS 的图像大小，但我不知道如何提供 hdpi(1.5x) 和 xxxhdpi(3.5x) 图像？

我正在尝试使用 pdf.js 显示 pdf。我能够在所有设备上正确显示它。但是，在视网膜显示器和 4k 显示器上它是模糊的。

我在这里、这里和这里发现，我必须使用该值window.devicePixelRatio ，但我不是 Javascript 专家，我不知道如何使用它。

同样在这里，mozilla 对如何设置像素比率有一个简单的（不适合我）解释。但是因为我刚刚开始使用 JS，所以我被困住了。

这是我的代码：

我在哪里可以找到索尼 Xperia XA1、OnePlus 6T 等设备的像素比。是否有任何可用的 API 或网站或任何公式可以得到它？

例如：

苹果 iPhone 6s

实际分辨率：750 x 1334

CSS 像素比：??

我使用pylet编写了一个游戏。它使用宽度为 1600 和高度为 900 的静态窗口，假设用户拥有全高清显示器，因此一切都将可见。然而，在某些设备（带有小显示器）上，窗口比预期的要大得多。我发现pixel_ratio已设置（例如设置为2.0），使每个虚拟像素以物理像素显示双倍大小（2x2）。

我想防止这种行为，但不知道如何，我知道我可以通过 get_pixel_ratio() 轻松获得像素比，但我实际上不知道如何设置它们或防止 pyglet 自动设置它们。

我还尝试使用 glViewport 似乎有效果，但它没有按我想要的方式工作。

那么如何更改 pixel_ratio 或防止自动更改它。

我一直在尝试将 HTML5 画布转换为低质量的 dataUrl，因为我必须通过服务器传输 dataURL 文件，但我是否这样做

或者

质量没有改变，字符串长度保持不变，当我在两种情况下下载该图像时质量相同，知道我做错了什么吗？

这是一个例子，但我正在做的画布有更好的pixelRatio并且细节很好

在 OpenLayers 5.3 中，我们曾经这样做来更改地图中所有图层的 pixelRatio：

但是，在 OpenLayers 6.5 中，这仅影响矢量图层，而不影响例如具有 XYZ 源的平铺层。

有没有实现这一目标的新方法？

感谢您的任何建议，Vojtech

我最近遇到了一个使用多个媒体查询的 CSS 文件。每个媒体查询内部都有相同的样式规则。

我基本上想知道我是否可以安全地将这 6 个元查询简化为 2 个，并获得相同的效果。

根据我对 -webkit-min-device-pixel-ratio 的了解，我不确定为什么在这里使用它。为什么有人会根据设备的像素比率或分辨率而不是标准的“格式化像素”来定位设备？

简化：