[英]Chrome Devtools mobile repsonsive View shows wrong size
找不到任何关于此的信息，所以我在这里问这个：
我有一个非常简单的页面，并希望一个元素是全宽的（ width: 100vw ）。 我注意到在小于 300 像素左右的屏幕上，它变得更小并且不是实际的全宽。
没有在我所有的 html 之上插入一个全新的 div，给它一个background: black; height: 100vh; 和width: 100vw; 它实际上不是全屏尺寸。
正如您在我的屏幕截图中看到的，设置的“显示尺寸”为 352 像素 x 778，元素应为 352x778（与屏幕尺寸完全相同），但您可以看到它更小。
是什么原因造成的，我该如何解决？ 现在什么是正确的？ 我看到了什么或价值说了什么？ 这很烦人。
如果需要：我在 macOS Big Sur 版本 11.2.3 (20D91) 上使用 chrome 89.0.4389.114
插入代码时添加：
当我减少代码以在此处发布时，我发现包装器是问题所在。 但我相信这个问题仍然有效。 为什么没有与<header>连接的包装器是视口的问题？
html, body { margin: 0; }.wrapper { width: 380px; margin: 0 auto; }.header { background: black; width: 100vw; height: 100vh; }
<html> <head> <meta name="viewport" content="width=device-width"> </head> <body> <div class="header"> </div> <div class="wrapper"> <div class="user"> <h2> Lorem Ipsum, <br> Lorem Ipsum Dolor sit amet! </h2> </div> </div> </body> </html>
阅读更多关于使用桌面浏览器或移动浏览器在网页中缩放的信息
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
在移动模式下使用 Google Chrome 开发工具将屏幕尺寸减小到 300 像素以下时，导航栏宽度减少的幅度超出了需要
[英]Navbar width reduces more than needed when reducing screen size below 300px using Google Chrome devtools in mobile mode
Tailwind 自定义类不适用于移动设备和 Chrome DevTools，但适用于桌面和 Safari DevTools
[英]Tailwind custom classes aren't applied for mobile devices and Chrome DevTools, but work on desktop and Safari DevTools
在桌面上使用 Chrome 移动视图和在移动设备上使用 chrome 的区别
[英]Difference in using chrome mobile view in desktop and using chrome in mobile
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.