1. ホーム
  2. html

[解決済み】私の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でも問題なく動作するようです...。