css - 如何使我的固定页脚不随 iPhone Safari 上的其他内容一起缩放？

Question

我的 iOS 网页中已经有一个可用的固定页脚，但我想修复它，这样它就不会随其余内容一起缩放。目前，它在正常缩放级别下看起来很好，但当用户放大时，页脚变得太大并超出页面(见下面链接的截图图像)。我已经在标题中实现了所需的行为，因此它不会随页面的其余部分一起缩放。我目前使用的是 div 标签，而不是实际的页脚标签，但我已经尝试了两种方法，但问题仍然存在。我在图片链接下方包含了相关的 CSS 代码。我曾尝试使用 width:100%; 而不是 max-width:380px; 但没有成功。要查看完整的 HTML/CSS 源代码，请使用浏览器的“查看源代码”功能，网址为 http://www.michigandayspas.com/index.php .页脚 div 非常靠近底部，div 类是“footer-cont”和“footer”。

我已将页眉和页脚内容包装在类似的 div 中，所以我很困惑为什么它们的行为不相似。一个区别是页眉有一个 IMG 标签，但页脚 div 包含更复杂的 HTML 元素，例如表格，但我不明白这会如何导致问题。我从一个有用的视频教程中获取并修改了代码:http://www.cssreset.com/creating-fixed-headers-with-css/

注意:我有两个样式表；一种用于台式机或平板电脑，另一种用于手机，尤其是 iPhone。为了现场演示，请在您的智能手机或模拟器(例如作为 Xcode 的一部分的 iOS 模拟器)中访问上面的链接。我在 iOS 上使用 Safari。

这些是演示问题的屏幕截图图像的 URL: michigandayspas.com/images/iOS_index.png michigandayspas.com/images/ads_too_large.png

来自 small-device.css 文件的相关 CSS

.header-cont {
    width:100%;
    position:fixed;
    top:0px;
    background-color: white;
}
.header {
    margin-right: auto;
    margin-left:  auto;
    display:block;
    width: auto;
}

div.footer-cont {
    max-width:380px;
    position:fixed;
    bottom:0px;
    margin-right: auto;
    margin-left:  auto;
    opacity: 100%;
}
div.footer {
    margin-right: auto;
    margin-left:  auto;
    display:block;
    width:auto;
    background-color: white;
    opacity: 100%;
}

Answer 1

您可以在移动设备上停止缩放，添加此元标记:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />