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

Question

目前正在为餐厅制作临时页面，见于：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。

这是一个错误，因为页脚文本（phone 编号、电子邮件等）的比例应该显示如下（通过 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 开发人员工具检查元素时，列出的样式也会正确显示。

非常感谢！

Answer 1

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

阅读更多：https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

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

Media Query (for iPhone) Section Not Being Applied; Other Queries Working

css

iphone

safari

media

breakpoints