0

私はこのようなcssメディアクエリを持っています

<!-- Common Styles sheet for desktops/tablets/iPads -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (min-device-width : 20px) and (max-device-width : 480px)" />

<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" />
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />

問題は、smartphone-landscape.css ファイルが iPad でも実行されていることです。どうすれば防ぐことができますか？そのため、スマートフォン ランドスケープは iPhone のランドスケープ モード (および同様の解像度のデバイス) でのみ機能し、iPad では機能しません。

4

2 に答える 2

0

smartphone.css によって上書きされるため、ipad-landscape.css 内のスタイルシートを再適用する必要があります。

于 2012-02-28T11:38:50.023 に答える
0

Chris Coyer の記事を参照すると、メディア クエリを使用して ipad のみとスマートフォンを対象とする特定の css コードがいくつかあります。

記事全文: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

ipad のみのクエリの特定の「デバイス」参照に注意してください。

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

だからあなたの場合：

<!-- Common Styles sheet for desktops/tablets/iPads -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (max-width : 320px)" />
<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" />
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />
于 2011-12-06T09:39:59.047 に答える