简体繁体 English

在 Chrome Dev Tools 中模拟移动设备时，HTML 和 body 的大小有什么关系？

[英]What is the deal with the size of HTML and body when simulating a mobile device in Chrome Dev Tools?

原文 2019-09-26 22:51:06 0 1 html/ css/ google-chrome/ mobile

I recently tried to load a tool on my phone that I develop that is hosted internally where I work.我最近尝试在我的手机上加载一个我开发的工具，该工具在我工作的内部托管。

A few things looked off, which I expected.有几件事看起来不对劲，这是我所预料的。 But one particular element seemed to be extra odd.但是一个特定的元素似乎特别奇怪。

I eventually loaded the page in Chrome on a MacBook Pro and used the "Device Toolbar" feature to render it in my Desktop browser like it would on a phone.我最终在 MacBook Pro 上的 Chrome 中加载了该页面，并使用“设备工具栏”功能在我的桌面浏览器中呈现它，就像在手机上一样。 To keep a private application private I will demonstrate with Google.com.为了保持私有应用程序的私密性，我将使用 Google.com 进行演示。 This is what I see:这就是我所看到的：

That's the body element highlighted in blue.那就是以蓝色突出显示的body元素。 The html element is the same. html元件是相同的。

This is what I see in my application too and explains what I'm seeing when actually using my phone.这也是我在应用程序中看到的内容，并解释了我在实际使用手机时看到的内容。

I can't, for the life of me, understand why these elements chose this size.对于我的生活，我无法理解为什么这些元素选择了这个尺寸。 There is no explicit "width" for these elements, nor is there "max-width" etc. Nothing that I can see that should cause this behavior.这些元素没有明确的“宽度”，也没有“最大宽度”等。我看到的任何东西都不会导致这种行为。

Can anyone explain this behavior?谁能解释这种行为？

UPDATE更新

It appears that there is some odd behavior with Dev Tools.开发工具似乎有一些奇怪的行为。 Proper mobile testing probably shouldn't be done this way (Feel free to change my mind, Google...) but the issue stands that sometimes, the body element doesn't stretch to accommodate its content.适当的移动测试可能不应该以这种方式进行（随意改变我的想法，谷歌......）但问题在于，有时，body 元素不会拉伸以适应其内容。

1 个解决方案

By default, block-level elements, including <body> , do not expand to fit their content, but rather will expand to the width of its container.默认情况下，包括<body>在内的块级元素不会扩展以适应其内容，而是会扩展至其容器的宽度。 See the spec for detailed information.有关详细信息，请参阅规范。

See this fiddle demonstrating this.看到这个小提琴证明了这一点。 If you resize the panels/window you'll see the body width changing based on the viewport, but the content width has absolutely no effect.如果您调整面板/窗口的大小，您将看到主体宽度根据视口而变化，但内容宽度绝对没有影响。

This SO question has more information: Why isn't <body> expanding to fit its contents?这个 SO 问题有更多信息：为什么不 <body> 扩展以适应其内容？

Another issue that's not helping is related to the Chrome dev tools device toolbar.另一个没有帮助的问题与 Chrome 开发工具设备工具栏有关。 Changing the zoom, disabling and re-enabling the device toolbar and its settings can be buggy and is not always reliable.更改缩放、禁用和重新启用设备工具栏及其设置可能有问题，并且并不总是可靠的。 I have spent hours chasing issues that didn't actually exist because the device toolbar functionality misled me.由于设备工具栏功能误导了我，我花了好几个小时寻找实际上并不存在的问题。