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;并不代表某种＆＃34;墙＆＃34;构建内容停止的地方。相反，它意味着：

如果需要，
内容会被剪裁以适合填充框。没有滚动条。

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

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

Answer 2

您需要在各个地方处理CSS。如下所示：

#mission p{
  width:100%;
    max-width: 420px;
       float:left;
        padding-top:26px;
         text-align: left;
         font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.64;
  letter-spacing: normal;
  text-align: left;
  color: #383836;
}
#secure p{
  width:100%;
       max-width: 420px;
      padding-bottom: 189px;
        padding-top:28px;
         text-align: left;
         font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.64;
  letter-spacing: normal;
  text-align: left;
  color: #383836;
}
html, section{
    max-width: 100%;
overflow: auto;

}

提示：

如果您计划使用自适应屏幕，则不应使用任何部分或组件的固定宽度。

请参阅fiddle here

Answer 3

更好的响应式设计的一些基本步骤：

body * {
  max-width: 100%;
  box-sizing: border-box;
}

除非必要，否则应避免使用溢出隐藏。

此外，您在下方有水平滚动条，因为底部有2列比视口宽度大。

Answer 4

你可以使用@ media-query定义/调整宽度/高度，或者你在任何分辨率下做什么。

@media screen and (max-width:320px) {
  section {
    width: 100px;
}

对于具有screen且max-width为632px的窗口的设备应用该样式，这个说法。除了指定screen而不是其他可用的媒体类型（最常见的其他媒体类型）之外，这几乎与上述相同。

在移动设备中使用视口问题，内容正在移动中切入

4 个答案: