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。

这是一个错误，因为页脚文本（电话号码，电子邮件等）的比例应显示如下（通过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）部分未应用;其他查询工作

1 个答案: