logo标签列表

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

htmlcsshighdpi
3

我确定我在这里漏掉了什么。

为什么这个100%宽度的图像比window.screen.width * window.devicePixelRatio要大？

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

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

固定宽度的图片

如果我放一个720px的图片，它不能覆盖整个设备宽度吗？

请注意，这是在我的真实设备上，一个分辨率为720x1280的moto g4 play上进行的 enter image description here

编辑

当我运行这段代码时，图像的报告宽度为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>

如果我要猜的话，我会说那只是显示真实像素计数，或者屏幕上有多少个像素。平板电脑和手机往往具有较低的像素计数，因此相同大小的图像需要更多的像素才能在您的桌面上正确显示。但是如果您不提供代码，我们只能做到这么多。 - Lee A.
嗨@LeeA。请查看我的编辑。谢谢！ - Cesar
Cesar，我刚刚在我的设备上加载并检查了一下，这里的问题绝对只是桌面和移动设备处理像素的不同方式。https://i.imgur.com/BQmlkva.png 那个正方形的真实大小是368x368，但浏览器识别出移动设备具有更高的像素密度，因此它试图在两个地方显示正确的数字并感到困惑。从长远来看不应该影响任何事情，只是一个视觉问题。（抱歉，在我的第一条评论中我说反了，是移动设备具有更高的像素数。） - Lee A.
谢谢您的查看，我也发现了一些固定图像宽度的问题。如果我将720像素的图像宽度放置在其中，它并不能覆盖整个设备宽度。这很奇怪，因为我已经在另一个设备上检查过，并得到了相同的结果。 - Cesar
你是在谈论图像边缘周围的小边距吗？这是由于body标签上的默认边距所致。https://dev59.com/4Gcs5IYBdhLWcg3wHwNH - Turnip
@Turnip 不是。我修改了测试代码，问题由 Kornel 解答。 - Cesar
1个回答
4

因为移动浏览器为了兼容非移动页面而模拟桌面浏览器，所以尺寸被缩放或伪装。

默认情况下，移动浏览器中的页面会在一个960像素宽的虚拟屏幕上渲染，然后缩小到实际屏幕大小（或进行缩放等操作）。本文深入介绍了这个过程： https://www.quirksmode.org/mobile/viewports.html

如果想让你的页面尺寸更接近于实际设备屏幕尺寸，你需要添加以下内容：

 <meta name="viewport" content="width=device-width,initial-scale=1">
是的！最后我们还应该加上initial-scale=1。谢谢！ - Cesar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接