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

在iOS中，我的网页中已经有一个可用的固定页脚，但我想修复它，使其不会缩放其余内容。目前，它在正常的缩放级别下看起来很好，但是当用户放大时，页脚会变得太大，并从页面上消失（参见下面链接的屏幕截图）。我已经在标题中实现了所需的行为，因此它不会缩放页面的其余部分。我目前正在使用div标记，而不是实际的页脚标记，但我已经尝试了两种方法，问题仍然存在。我在图片链接下面包含了相关的CSS代码。我试过使用

width:100%而不是
最大宽度：380px
我已经将页眉和页脚内容包装在类似的div中，所以我不明白为什么它们的行为不相似。一个区别是页眉有一个IMG标记，但footer div包含更复杂的HTML元素，如表，但我不认为这会导致问题。我从一个有用的视频教程中获得并修改了代码，网址为：

注意：我有两个样式表；一个用于台式机或平板电脑，另一个用于移动电话，尤其是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%;
}

您可以停止移动设备上的缩放添加此元标记：

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


感谢您的回复。我试着将它添加到我的页面中，但这并没有给出我想要的东西。默认情况下，使用此选项会导致页面放大过远。我希望用户能够放大页面，但不能放大页脚。有没有办法修改这个meta标签来实现这一点？通常不是通过meta或css。试试这个答案：