0

IOS7 ブラウザー (safari および chrome) で奇妙な問題が発生しています。

横向きの場合、メディア クエリが機能せず、幅/高さ ($(window).width()および$(window).height()それぞれから指定) は、ios6 サファリとクロムで通常表示されていた 1024/672 ピクセルではなく、768/519 です。

ポートレイトでは、768/927 が正しいです。

他の誰かがそのバグ/癖や回避策を見つけましたか?

*更新* これは私のヘッダーコードです（wordpressコードとともに）：

<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport' />
<meta name="viewport" content="width=device-width" />
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
4

2 に答える 2

0

Use aspect-ratio and device-aspect-ratio instead. Bulletproof iOS media queries...

/* iPad: portrait */
@media screen and (aspect-ratio: 768/716) and (device-aspect-ratio: 768/1024), screen and (aspect-ratio: 768/1024) and (device-aspect-ratio: 768/1024) {
    /* styles here */
}

/* iPad: landscape */
@media screen and (aspect-ratio: 1024/372) and (device-aspect-ratio: 768/1024), screen and (aspect-ratio: 1024/768) and (device-aspect-ratio: 768/1024) {
    /* styles here */
}

/* iPhone 3.5" screen: portrait */
@media screen and (aspect-ratio: 320/220) and (device-aspect-ratio: 320/480), screen and (aspect-ratio: 320/480) and (device-aspect-ratio: 320/480) {
    /* styles here */
}

/* iPhone 3.5" screen: landscape */
@media screen and (aspect-ratio: 480/114) and (device-aspect-ratio: 320/480), screen and (aspect-ratio: 480/320) and (device-aspect-ratio: 320/480) {
    /* styles here */
}

/* iPhone 4" screen: portrait */
@media screen and (aspect-ratio: 320/308) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 320/568) and (device-aspect-ratio: 320/568) {
    /* styles here */
}

/* iPhone 4" screen: landscape */
@media screen and (aspect-ratio: 568/114) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 568/320) and (device-aspect-ratio: 320/568) {
    /* styles here */
}
于 2013-10-06T16:41:58.523 に答える