Javascript 如何获得加载锐利图像的设备分辨率，但使用视口宽度=设备宽度正确调整字体/div的大小？

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

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

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

640px

宽时，它会报告宽度为

320px

我如何考虑这两种差异？（如果没有viewport标签，css将无法正确调整大小。有了它，我的代码会在屏幕上每个像素报告1像素宽度的设备上加载分辨率过低的图像）

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

---

我希望字体和元素的大小基于

width=devicewidth

，而不是我加载的图像。如何组合这些值？

获取

window.devicePixelRatio

并将其乘以您计划显示图像的宽度，以获得您需要的图像的真实宽度。

@quantumwannabe您能否将其作为答案，以便我标记此问题的答案？谢谢