How get device resolution for loading sharp images but size fonts/divs properly with viewport width=device-width?

Question

On mobile, if I don't use the tag (see below) to set the viewport width to device width, then fonts are too small and hard to read and divs size more like on a desktop.

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

But if I use that, then choosing what size image to load will return a small, pixelated image because the reported pixel width is half what it really is. For example, an iPhone 5S will report a width of 320px when it's really showing a resolution of 640px wide.

How do I allow for both these differences? (without the viewport tag, the css will not size properly. with it, my code loads too low a resolution image on devices that report 1 pixel width for every pixel on screen)

I can't just double the pixel width when loading images because not every device/browser halves the pixel size.

I want the fonts and elements to be sized based on width=device-width but not the images I load. How do I combine these?

Answer 1

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