在 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?
問題描述
我最近嘗試在我的手機上加載一個我開發的工具，該工具在我工作的內部托管。
有幾件事看起來不對勁，這是我所預料的。 但是一個特定的元素似乎特別奇怪。
我最終在 MacBook Pro 上的 Chrome 中加載了該頁面，並使用“設備工具欄”功能在我的桌面瀏覽器中呈現它，就像在手機上一樣。 為了保持私有應用程序的私密性，我將使用 Google.com 進行演示。 這就是我所看到的：
那就是以藍色突出顯示的body元素。 html元件是相同的。
這也是我在應用程序中看到的內容，並解釋了我在實際使用手機時看到的內容。
對於我的生活，我無法理解為什么這些元素選擇了這個尺寸。 這些元素沒有明確的“寬度”，也沒有“最大寬度”等。我看到的任何東西都不會導致這種行為。
誰能解釋這種行為？
更新
開發工具似乎有一些奇怪的行為。 適當的移動測試可能不應該以這種方式進行（隨意改變我的想法，谷歌......）但問題在於，有時，body 元素不會拉伸以適應其內容。
1 個解決方案
解決方案1
1 已采納 2019-09-27 14:56:08
默認情況下，包括<body>在內的塊級元素不會擴展以適應其內容，而是會擴展至其容器的寬度。 有關詳細信息，請參閱規范。
看到這個小提琴證明了這一點。 如果您調整面板/窗口的大小，您將看到主體寬度根據視口而變化，但內容寬度絕對沒有影響。
這個 SO 問題有更多信息： 為什么不 <body> 擴展以適應其內容？
另一個沒有幫助的問題與 Chrome 開發工具設備工具欄有關。 更改縮放、禁用和重新啟用設備工具欄及其設置可能有問題，並且並不總是可靠的。 由於設備工具欄功能誤導了我，我花了好幾個小時尋找實際上並不存在的問題。
CSS Grid 在實際移動設備上無法正常工作的問題。 在 Chrome/Firefox 開發工具中進行測試時，代碼運行良好
[英]Having an issue with CSS Grid not working properly on actual mobile device. The code works perfectly when testing within Chrome/Firefox dev tools
Srcset 屬性在移動設備和 Chrome 開發工具中的移動設備視圖中無法正常工作
[英]Srcset attribute not working as expected on mobile and in mobile device view in Chrome dev tools
Chrome開發人員工具：使用元素選擇工具時，主體元素會覆蓋其他元素
[英]Chrome Dev Tools: body element cover others when using elements selection tool
我的 IDE 和 HTML 中的 HTML 在檢查時如何
[英]how can the HTML in my IDE and HTML in chrome dev tools when inspected differ
按鈕在開發工具上正確對齊，但在實際移動設備上不正確
[英]Button is aligned correctly on Dev tools, but incorrectly on actual mobile device
Google Chrome 開發工具移動視圖未顯示 Iframe 內容
[英]Google Chrome Dev Tools Mobile View not showing Iframe content
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Chrome/Firefox 開發工具中沒有模擬設備像素比？
CSS Grid 在實際移動設備上無法正常工作的問題。 在 Chrome/Firefox 開發工具中進行測試時，代碼運行良好
Srcset 屬性在移動設備和 Chrome 開發工具中的移動設備視圖中無法正常工作
Chrome開發人員工具：使用元素選擇工具時，主體元素會覆蓋其他元素
Chrome 開發工具導出元素 HTML
如何隱藏chrome dev工具中的html注釋？
我的 IDE 和 HTML 中的 HTML 在檢查時如何
按鈕在開發工具上正確對齊，但在實際移動設備上不正確
Chrome-Dev-Tools 中的移動視圖是否強制縮放？
Google Chrome 開發工具移動視圖未顯示 Iframe 內容
相關標簽