桌面和移动设备之间的 css 正文宽度变化答案

【问题标题】：Css body width changes between desktop and mobile桌面和移动设备之间的 css 正文宽度变化
【发布时间】：2021-12-14 09:44:53
【问题描述】：

我的页面使用 100% 宽度时遇到了问题。它在桌面上运行良好，占据整个页面宽度，但在移动设备上它变得很奇怪。我正在使用 NextJS 和 Material-UI，如果它有什么不同的话。我尝试设置宽度：100%，但没有任何改变。

我的 CSS 是：

global.css：

    html,
body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

* {
    box-sizing: border-box;
}

_app.js

<Head>
        <title>E-commerce</title>
        <meta
            name="viewport"
            content="initial-scale=1.0, width=device-width"
                                />
        </Head>

这是移动设备上的正文宽度。 HTML，正文宽度为灰色部分

【问题讨论】：

请在可运行的 sn-p 中添加所有必要的代码（HTML、CSS、JS），以便我们查看发生了什么。如何？ stackoverflow.com/help/minimal-reproducible-example。根据您发布的内容，我们看不到问题。

标签： html css reactjs next.js

【解决方案1】：

我不确定您需要什么，但请尝试使用 width: 100vw。这可能会完成这项工作。尽管您应该尽量避免给<body> 提供宽度，而是使用容器<div>。
从图像看来，您的正文内容从正文标记溢出，这会在您的项目扩展时导致问题更多元素。

【讨论】：

【解决方案2】：

假设您粘贴的 css 是您拥有的唯一样式，则预览符合预期。请将@media 查询添加到您的 CSS。还将“box-sizing”添加到您的 html 和 body 标签

html, body, *{
 box-sizing: border-box;
}

您的 CSS 在桌面视图中运行良好。但是在<body> 标记中，您有一些比当前视口大的元素。使用浏览器检查器，您会找到元素。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。