8

iPad でここにアクセスしてクリックするChapter1 > Chapter 1 > Get started...と、読み込み画面の後に第 1 章のページが表示されます。

基本的にこれは、HTML5 と JavaScript によってまとめられた iframe に埋め込まれた html です。この iframe の html は、other.css という独自の css シートを呼び出します。これをまとめた html ファイルは、styles.css というスタイルシートを呼び出しています。

明らかに、この iframe のコンテンツ領域を縦向きビューで横向きビューよりも小さくしたいと考えています。私は other.css で css を使用しています:

@media only screen and (device-width: 768px) and (orientation:landscape) {
    #content {background:green;}
}


@media only screen and (device-width: 768px) and (orientation:portrait) {
    #content {background:blue;}
}

問題は、ポートレートCSSさえ見えないことです。私はさまざまな方法を試しました (これは正しい方法であると考えられており、ページ全体への styles.css の調整で機能します) が、認識されません。ランドスケープのみを使用します。メディアクエリが表示されないわけではなく、ランドスケープ CSS をプルします。ただし、ポートレートは使用しません。本当に奇妙です。ポートレートとランドスケープの背景が緑色に見える場合、ポートレートは無視されます。青色に見える場合は、機能しています。どうすればこれを達成できますか？

横向きの CSS を取り除くと、縦向きよりもデフォルトが優先されます。意味がありません。iframe が向きの変更時に新しい CSS を取り込むのを妨げている可能性はありますか?

4

2 に答える 2

2

最小または最大のデバイス幅をターゲットにする必要があります。そうしないと、デバイスを見逃すことになります。

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

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

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/から

これは、おそらくそれほど具体的であってはならない理由の説明ですhttp://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised

于 2012-12-03T16:49:25.573 に答える
1

あなたができることは、デスクトップとタブレット専用の2つの異なるスタイルシートを作成することです。 <link rel="stylesheet" media="screen" href="css/stylesheet1.css"> <!--Desktop--> <link rel="stylesheet" href="css/tablet-nav.css" media="screen and (min-width: 800px) and (max-width: 1024px)"> <!--tablet-->

追加することを忘れないでください。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/ http://webdesignerwall.com/tutorials/css3-media-queries

于 2012-12-10T22:50:39.133 に答える