私はレスポンシブなウェブページを持っています。メディアクエリを利用します。
ただし、iframeに読み込まれた同じページは機能しません。
たとえば、私のウェブページで、画面の幅が640px未満の場合、背景色を赤に指定しています。
@media only screen and (max-device-width : 640px) {
.header-text {
background-color: red;
}
}
そのため、そのウィンドウを新しいタブに読み込み、ブラウザの幅を640px未満にすると、背景色が赤になります。
ただし、320 * 480のサイズのiframeに読み込まれた同じウィンドウには、背景色が赤ではありません。
Iframeでメディアクエリを機能させる方法は?
device
の代わりにこの方法を試してくださいwidth
をターゲットにするだけです
変化する
@media only screen and (max-device-width : 640px) {
に
@media only screen and (max-width : 640px) {
また、スタイルシートのメディアクエリ宣言の順序を考慮しない場合は、minとmaxの両方のビューポート幅をターゲットにすることをお勧めします
@media screen and (min-width: 320px) and (max-width: 640px) {
.header-text {
background-color: blue;
}
}
IframeをロードするHTMLにメタベローズを含めると、少なくともAndroidデバイスで機能します。
<meta name="viewport" content="width=device-width, initial-scale=1">
私はiframeの幅をターゲットにしなければならなくなりました。 (すべての状況で機能しない場合があります)
しかし、私がしたことはiframeを100%幅にし、ウィンドウに合わせてサイズを変更することでしたので、ウィンドウの代わりにiframeのpxをターゲットにしました。