如何获得设备分辨率来加载清晰的图像，但是在视口宽度=设备宽度的情况下正确调整字体/ div的大小？

Question

在移动设备上，如果我不使用标签（见下文）将视口宽度设置为设备宽度，那么字体太小而且难以阅读，并且更像桌面上的大小。

<meta name="viewport" content="width=device-width, initial-scale=1">

但是如果我使用它，那么选择要加载的大小图像将返回一个小的像素化图像，因为报告的像素宽度是实际的一半。例如，当iPhone 5S真正显示320px宽的分辨率时，它会报告640px的宽度。

如何兼顾这两种差异？ （没有视口标记，css将无法正确调整大小。使用它，我的代码在屏幕上每个像素报告1个像素宽度的设备上加载的分辨率图像太低）

加载图片时，我不能只加倍像素宽度，因为不是每个设备/浏览器都会将像素大小减半。

我希望字体和元素的大小基于width=device-width而不是我加载的图像。我如何结合这些？

Answer 1

获取window.devicePixelRatio并将其乘以您计划显示图像的宽度，以获得您需要的实际图像宽度。