方向媒体查询 (css) 在带有 iOS 4.2.1 的 Ipod 上不起作用

发布于 2024-12-20 05:36:18 字数 816 浏览 2 评论 0原文

我正在开发一个移动网站，使用移动样板作为基本框架。在我的样式表中，我使用 @mediaqueries 来检测设备是否处于纵向或横向模式。

@media screen and (orientation: portrait) {
    .topteaser .article-headline { font-size: 138.5%; }
}

@media screen and (orientation: landscape) {
    .topteaser .article-headline { font-size: 123.1%; }
}

这在 iPod Touch（型号 MC540FD，iOS 4.3.3，视网膜显示屏）上工作正常，但在旧的 iPod Touch（型号 MC086FD，iOS 4.2.1，无视网膜显示屏）上则不起作用。即使在纵向模式下，也会应用横向样式。

（顺便说一句，我删除了 Cookies、Cache 和 Chronic，重新启动 iPod，但问题仍然出现）

我还检查了 http://wapsbttest1.momac.net/sandbox/css3/media_queries.html，旧的告诉我它是横向的模式，即使它不是...（愚蠢的 iPod！）

iOS 4.2.1 是否如此。不支持定向媒体查询？我用谷歌搜索了一下，发现至少从 4.2 开始就应该支持它。

是否有其他媒体查询仅检测 iPhone 并且不适用于设备宽度或比例？

原文

I'm developing a mobile website, using mobile boilerplate as a base framework.
In my stylesheet I use @mediaqueries to detect if the device is in portrait or landscape mode.

@media screen and (orientation: portrait) {
    .topteaser .article-headline { font-size: 138.5%; }
}

@media screen and (orientation: landscape) {
    .topteaser .article-headline { font-size: 123.1%; }
}

This works fine on an iPod Touch (Model MC540FD, iOS 4.3.3, retina display), but on an old iPod Touch (Model MC086FD, iOS 4.2.1, no retina display) it doesn't work. Even in portrait mode the landscape styles are applied.

(Btw, I deleted Cookies, Cache and Chronic, restartet the iPod- but the problem still appears)

I also checked http://wapsbttest1.momac.net/sandbox/css3/media_queries.html with both iPods, and the old one tells me that it is in landscape mode even if it isn't...(stupid iPod!)

Does iOS 4.2.1. doesn't support orientation mediaqueries? I google'd and found out that it should be supportet at least since 4.2.

Are there any other mediaqueries which detects only iPhones and don't work with device-width or ratio?

分享到QQ

分享到微博