为什么这个 100% 宽度的图像大于屏幕宽度 * 设备像素比

Question

我确定我在这里遗漏了一些东西。

为什么这张 100% 宽度的图片比 window.screen.width * window.devicePixelRatio

大

如果屏幕宽度等于360px且设备比例为2

这张 100% 宽度的图片不应该等于 720px 而不是报告的 964px

固定宽度图片

此外，如果我放置 720 像素的图片，它不会覆盖整个设备宽度？？？

请注意，这是我的真实设备，屏幕分辨率为 720x1280 的 moto g4 play

编辑

当我运行此代码时，如果图像在我的情况下为 964px，则报告的宽度。

这段代码也在这里http://li209-135.members.linode.com/

应该在移动浏览器中查看。

<!DOCTYPE html>
<html>
<head>
 <title>Test</title>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
 <script>
  $(function(){
    $('#log').append('<p style="font-size:2em;">Screen Width: ' + window.screen.width + '</p>');
    $('#log').append('<p style="font-size:2em;"> Device Pixel Ratio: ' + window.devicePixelRatio + '</p>');
    $('#log').append('<p style="font-size:2em;"> Image Width: ' + $('#test-image').width() + '</p>');
  });
 </script> 
</head>
<body>
 <img id="test-image" width="100%" src="http://via.placeholder.com/100x100">
 <div id="log"></div>
 <br>
 <img id="test-image" width="360px" src="http://via.placeholder.com/360x100"> 
 <br>
 <img id="test-image" width="720px" src="http://via.placeholder.com/720x100">

</body>
</html>

Answer 1

尺寸是缩放的或假的，因为移动浏览器模拟桌面浏览器以与 non-mobile 页面兼容。

默认情况下，移动浏览器中的页面呈现在 960 像素宽的虚拟屏幕上，然后将其缩小到实际屏幕尺寸（或缩放等）。本文深入描述了这个过程： https://www.quirksmode.org/mobile/viewports.html

要使您的页面尺寸更接近实际设备屏幕尺寸，您需要添加：

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

为什么这个 100% 宽度的图像大于屏幕宽度 * 设备像素比

Why this 100% width image is bigger than screen width * device pixel ratio

html

css

highdpi

固定宽度图片

编辑