媒体查询（适用于 iPhone）部分未应用；其他查询工作答案

【问题标题】：Media Query (for iPhone) Section Not Being Applied; Other Queries Working媒体查询（适用于 iPhone）部分未应用；其他查询工作
【发布时间】：2015-01-31 00:04:09
【问题描述】：

目前正在为一家餐厅制作临时页面，如：mattt.co/ok-rm/iddu。我为从大到小的桌面屏幕以及移动设备设置了许多@media 断点。

查询似乎工作正常，但是，一个特定的查询运行不正常，那就是 iPhone 横向视图中的 '.footer1 a, footer2 a' 样式 — 查询如下：

@media only screen and (min-width : 320px) and (max-width: 736px) and (orientation: landscape)

就目前而言，当以横向模式查看时，该网站在 iPhone 上显示如下：Image。

这是一个错误，因为页脚文本（电话号码、电子邮件等）的比例应显示如下（通过 Chrome 的 iPhone 模拟器查看）：Image。

我不确定为什么所有其他元素似乎都在各自的断点处正确缩放，但是“.footer1 a”和“.footer2 a”样式在 iPhone 的横向视图中并未按预期显示.

我在下面附上了相关代码。

<meta name="viewport" content="width=device-width, initial-scale=1" />

.footer1 a, .footer2 a {
    font-family: pitch;
    display: block;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: 1px; 
    }

@media only screen and (min-width: 1400px) and (max-width: 1599px) and (orientation: landscape) {
    .footer1 a, .footer2 a {
        font-size: 25px;
        line-height: 35px;
    }
}


@media only screen and (min-width: 1201px) and (max-width: 1399px) and (orientation: landscape) {
    .footer1 a, .footer2 a {
        font-size: 20px;
        line-height: 30px;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) and (orientation: landscape) {
    .footer1 a, .footer2 a {
        font-size: 20px;
        line-height: 30px;
    }
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
    .footer1 a, .footer2 a {
        font-size: 15px;
        line-height: 20px;
    }
}

@media only screen and (min-width : 569px) and (max-width: 1024px) and (orientation: portrait) {
    .footer1 a, .footer2 a {
        font-size: 28px;
        line-height: 36px;
    }
}

@media only screen and (min-device-width : 569px) and (max-device-width: 1024px) and (orientation: landscape) {
    .footer1 a, .footer2 a {
        font-size: 20px;
        line-height: 30px;
    }
}

@media only screen and (min-width : 320px) and (max-width: 736px) and (orientation: portrait) {
    .footer1 a, .footer2 a {
        font-size: 15px;
        line-height: 20px;
    }
}

@media only screen and (min-width : 320px) and (max-width: 736px) and (orientation: landscape) {
    .footer1 a, .footer2 a {
        font-size: 15px;
        line-height: 20px;
    }
}

如果有人能看一下，将不胜感激！我无法弄清楚我哪里出错了，即使使用 Safari 的 iPhone 开发人员工具检查元素，列出的样式也正确出现。

非常感谢！

【问题讨论】：

标签： css iphone safari media breakpoints

【解决方案1】：

您可能需要添加 html {-webkit-text-size-adjust:100%;} 以阻止 iOS 自动放大它认为太小的字体。

【讨论】：