[解決済み】私のCSS3メディアクエリがモバイルデバイスで機能しないのはなぜですか?
2022-02-06 02:19:05
質問内容
styles.cssで、メディアクエリを使用していますが、どちらもバリエーションがあります。
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
通常のブラウザ(Safari、Firefox)では、ウィンドウを縮小すると希望するレイアウトにリサイズされますが、携帯電話ではモバイルレイアウトが全く表示されません。代わりに、デフォルトのCSSが表示されるだけです。
どなたか正しい方向を教えてください。
どのように解決するのですか?
3つとも参考になるヒントでしたが、metaタグを追加する必要があったようです。
<meta content="width=device-width, initial-scale=1" name="viewport" />
これで、Android(2.2)でもiPhoneでも問題なく動作するようです...。
関連
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み】CSS "margin: 0 auto" が中央揃えにならない。
-
[解決済み] このCSSでInline-blockが正しく動作しないのはなぜですか?
-
[解決済み] フレックスアイテムを右にフロートさせる
-
[解決済み] IE=edge,chrome=1というのは今でも有効なのでしょうか?
-
[解決済み] CSS - display: none; が機能しない
-
[解決済み] mailchimpのメールインラインスタイルのコーディングがいつも通りできない
-
[解決済み] フロートされた子 div の高さを親の高さに拡張するにはどうすればよいですか?
-
[解決済み] メディアクエリ。デスクトップ、タブレット、モバイルをターゲットにする方法とは?
-
[解決済み] CSS メディアクエリ: max-width OR max-height
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JQuery: 'Uncaught TypeError: ajaxリクエストで「Illegal invocation」が発生する - 複数の要素
-
[解決済み] CSS color vs. background-color vs. background?
-
[解決済み] フレックスアイテムを右にフロートさせる
-
[解決済み] bodyタグに追加された奇妙なiframe、`rufous-sandbox`について
-
[解決済み] HTMLのテーブルを部分的に透明にするには?
-
[解決済み] iFrameがURLを読み込んでいない
-
[解決済み] Angular 2+のテンプレートで値を表す三項演算子
-
[解決済み] HTMLのバックスペース
-
[解決済み] Visual Studio Code CSSエラー「空のルールセットを使用しないでください」【終了しました
-
[解決済み] mailchimpのメールインラインスタイルのコーディングがいつも通りできない