Question

在我正在制作的Web应用程序的主页上，有按比例缩放为450px的照片。在移动设备中，所有内容都可以完美地显示在屏幕上，但是通过Web应用程序，我可以向右滚动至无内容，而页脚始终停留在底部。我认为这与我的身体和/或内容和页脚类有关。我为照片使用div class="content"，将照片居中放置在桌面版本的三行中间。我的代码中已经有这个了：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">

我的课看起来像这样：

body {
    margin: 0px;
    overflow-x: hidden;
}

.content {
    max-width: 450px;
    margin: auto;
}

.footer {
    height:50px;
    width: 100%;
    background-color: white;
    background-image: none;
    background-repeat: repeat;
    background-position: 0% 0%;
    border-top: .5px solid #F5F5F5;
    position: fixed;
    bottom: 0pt;
    left: 0pt;
    -webkit-box-shadow: 0px -1.5px 1.5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px -1.5px 1.5px rgba(50, 50, 50, 0.75);
    box-shadow: 0px -1.5px 1.5px rgba(50, 50, 50, 0.75);
}

您可以看到我尝试了overflow-x: hidden;，但是那没有用，并且我尝试了在正文和行类上调整边距和填充，但这没用。有没有人有好的解决方案？

Answer 1

没有代表将其设置为评论，因此请将其添加为可能的答案。

您的问题听起来像是应用程序没有真正响应（如果您的其他HTML设置不正确，则meta标签不会使其响应），但不能确定是否不查看您拥有的html。

一个建议是将整个代码放在容器类的主体中或只是图片div：

<div class="container">
   <!-- Content here -->
</div>

或

<div class="container-fluid">
   <!-- Content here -->
</div>

这通常是我用来使某些部位具有响应性的功能（您也可以将其添加到身体中）。

移动设备上的Boostrap 4可让我向右滚动至空白屏幕（带有页脚）

1 个答案: