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 */
    }
}

我已经读过 How can I force iPhone’s Safari to use media="handheld"? ，但这是 3 年前提出的问题。在当今 HTML5 和 CSS3 合规的时代，标准很容易被接受，我希望 Apple 在 iOS Safari 中加入一些东西，以便能够在 iPhone 现在相对较小的屏幕上实现手持媒体查询。

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

Answer 1

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

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

       //Styles for this device width here.
    }

或者你可以为 Iphone+Ipad 使用 device-aspect-ratio:

iPhone < 5:

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

iPhone 5:

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

iPad:

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