如何在移动浏览器上以全分辨率显示图像?

Question

移动设备上的浏览器视口大小通常远低于该设备的屏幕分辨率。例如：在iPhone X上，屏幕分辨率为1125 x 2436，而视口尺寸为375 x 812。

鉴于此，如何在iPhone X等设备上以全分辨率显示图像？如果您渲染src宽度为375px的<img>，它将填充 iPhoneX 屏幕的宽度。您如何更改此设置，使其仅根据设备的真实分辨率填充屏幕的三分之一，并以完整质量显示？也就是说，如何使图像显示真实屏幕分辨率而不是视口大小。

Answer 1

width: 33%;

或

width: 33vh;

将是宽度的三分之一。