html - 移动设备中的视口(viewport)问题，内容在移动设备中被剪切

Question

我定义了一个视口(viewport):

<meta name="viewport" content="width=device-width, initial-scale=1">

这是 html 和 body 样式:

body {
  overflow-x: hidden;
  font-family: Montserrat;
  font-family: 'Montserrat', sans-serif;
}

html,
section {
  overflow-x: hidden;
}

我的问题是，在移动设备中，内容会被裁剪并且不适合屏幕， 像下面的例子

我不确定为什么会发生这种情况，有人可以提供帮助吗？

谢谢。

Answer 1

不幸的是，您的 css 并非全部可用，我猜您的内容具有固定的 width 或 min-width。只需尝试给它一个 max-width: 100%; 就可以解决您的问题。 (如果存在 min-width 但并非绝对必要，也应将其删除。)

基本上 overflow: hidden; 或 overflow-x: hidden; 并不意味着在内容停止的地方 build 了一种“墙”。相反，它意味着:

Content is clipped if necessary to fit the padding box. No scrollbars are provided.

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

您可能还需要为合适的视口(viewport)调整内容的 padding 或 margin。为此，您可以查看来自 @Libin C Jacob 的评论中的链接。