ios - 我可以强制 iOS Safari 识别手持媒体查询吗？

Question

干净利落。如何强制 iOS Safari 识别这一点？

BUTTON {
    padding: 0 0.5em; /* To conserve screen space on point-and-click interfaces */
}

@media handheld {
    BUTTON {
        padding: 1em 2em; /* So fingers can more easily touch it */
    }
}

我已经阅读了如何强制 iPhone 的 Safari 使用 media="handheld"？，但这是 3 年前提出的。在当今 HTML5 和 CSS3 合规性以及标准被如此容易接受的时代，我希望 Apple 在 iOS Safari 中加入一些东西，以便能够在 iPhone 现在相对较小的屏幕上处理手持媒体查询。

我尝试使用精确值，例如screen and (max-width: 5in)，但显然它认为它的屏幕比 5 英寸宽。

Answer 1

您可以将此目标用于特定的设备宽度。

    @media only screen and (max-device-width: YourDeviceWidth){

       //Styles for this device width here.
    }

或者你可以为 Iphone+Ipad 使用设备纵横比：

iPhone < 5:

        @media screen and (device-aspect-ratio: 2/3) {
        }

iphone 5：

        @media screen and (device-aspect-ratio: 40/71) {
        }

平板电脑：

        @media screen and (device-aspect-ratio: 3/4) {
        }