如何通过视口width = device-width来获取用于加载清晰图像但正确设置字体/ div大小的设备分辨率？

Question

在移动设备上，如果我不使用标签（请参见下文）将视口宽度设置为设备宽度，则字体太小且难以阅读，并且divs的大小更像在台式机上。

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

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

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

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

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

Answer 1

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