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

我肯定我错过了什么

为什么此100%宽度图像大于

window.screen.width*window.devicePixelRatio

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

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

固定宽度图像 另外，如果我把一个720px的图像，它没有覆盖整个设备的宽度

请注意，这是在我的真实设备上，一款720x1280屏幕分辨率的moto g4游戏

编辑 当我运行此代码时，如果在我的示例中图像是964px，则报告的宽度为

这个代码也在这里

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

试验
$（函数（）{
$（“#log”）.append（“
屏幕宽度：“+window.Screen.Width+”
”）；
$（“#log”）.append（“
设备像素比率：”+window.devicePixelRatio+”
”）；
$（'#log'）.append（'
图像宽度：'+$（'#测试图像'）.Width（）+'
'）；
});

由于移动浏览器模拟桌面浏览器以与非移动页面兼容，因此这些维度被缩放或伪造

默认情况下，移动浏览器中的页面呈现在960像素宽的虚拟屏幕上，然后将其缩小到实际屏幕大小（或缩放等）。本文深入描述了这一过程：

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

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

如果让我猜的话，我会说这只是显示真实的像素数，或者屏幕上的像素数。平板电脑和手机的像素数往往较低，因此同样大小的图像需要更多像素才能正确显示在桌面上。但是如果你不提供你的代码，我们能做的只有这么多。请看我的编辑。谢谢塞萨尔，我刚把它加载到我的电脑上并检查了一下，这里的问题肯定只是台式机和移动设备处理像素的不同方式。该正方形的真实大小为368x368，但浏览器识别出移动设备的像素浓度较高，因此它试图在两个位置显示正确的数字，并会产生混淆。从长远来看不应该影响任何事情，只是一个视觉问题。（很抱歉，我在第一条评论中倒着说了，是移动设备的像素数更高。）感谢检查，我还发现了一些固定图像宽度的问题。如果放置720px的图像宽度，则它不覆盖整个设备宽度。这很奇怪，因为我在另一台设备上检查了这个，得到了同样的结果。你是说图像边缘的小边距吗？这是由于body标记上的默认边距造成的。对为了完成这个任务，我们应该把初始刻度也设为1。谢谢