桌面和移动设备之间的 css 正文宽度变化
Posted
技术标签:
【中文标题】桌面和移动设备之间的 css 正文宽度变化【英文标题】：Css body width changes between desktop and mobile 【发布时间】：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），以便我们查看发生了什么。如何？ ***.com/help/minimal-reproducible-example。根据您发布的内容，我们看不到问题。 【参考方案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。以上是关于桌面和移动设备之间的 css 正文宽度变化的主要内容，如果未能解决你的问题，请参考以下文章