如何防止Mobile Safari裁剪出网页底部？

Question

我目前正在为我的网站制作一个临时的“正在建设中”页面，其中内容将在100vh中设置的body元素的全高框内滚动，并被边距包围，以提供“页面”边界“似的效果。

但是，在Mobile Safari上进行测试时，我发现页面的底部边框被裁剪掉了，主body元素最终会被滚动而不是只有内容包装器。

如何让网站的底部区域显示在Mobile Safari的视口中？

Answer 1

你必须在css文件中提到有关不同屏幕尺寸的内容。尝试添加此内容，

@media only screen and (max-width: 640px) {
body {
    width:100%;
    height:100%;
}

}

这可能有用！

Answer 2

我强烈建议您熟悉自举：https://getbootstrap.com/。如果您在此处引用此网站：https://getbootstrap.com/docs/3.3/css/，您可以根据每个设备调整屏幕大小及其匹配方式。它也将使一切变得动态，这是一个巨大的节省时间。如果您在线搜索“bootstrap页脚（或其他任何内容），您可以导入代码并根据自己的喜好进行更改。”

此外，请务必在标题中写下以下行，以便导入引导程序库（如果这是您选择的路径）：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">

该链接用于CSS库。如果您需要JavaScript库，请参阅我的第一个链接。