メディア クエリがブラウザでは機能しないのに、モバイル デバイスでは機能するのはなぜですか?

メディア クエリ: 特定のデバイス解像度に合わせたスタイルの調整

@media min-width プロパティと max-width プロパティにより、スタイル ベースの詳細な制御が可能になりますデバイスの解像度について。ただし、この設定を使用すると、一般的な問題が発生します。つまり、モバイル デバイスでは動作しますが、ブラウザでは動作しません。

問題の原因

この問題は、ビューポートの幅とユーザーのスケーラビリティを指定するメタ タグ。このメタ タグを使用すると、デバイスのデフォルト設定を効果的に上書きすることになります。したがって、デバイスの寸法に基づく @media ルールは不正確になります。

解決策: スタイルの並べ替え

解決策は、CSS を再配置して、古いブラウザのデフォルト スタイルを優先することです。 @media をサポートしていません。次に、@media ルールを使用して、さまざまなデバイス解像度に特定のスタイルを適用します。推奨されるアプローチは次のとおりです。

/* Default styles for older browsers */
body {
  font-size: 16px;
}

/* Styles for larger browsers (>= 960px) */
@media only screen and (min-width: 960px) {
  body {
    font-size: 18px;
  }
}

/* Styles for iPhone-sized devices (<= 480px) */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 14px;
  }
}

追加の考慮事項

• iPad の画面は通常 iPhone より大きいため、個別の @media ルールが必要になる場合があります。
• @media print{} プロパティを使用して、印刷可能なバージョンのスタイルを指定できます。 content.
• さまざまなデバイスやブラウザでスタイルを常に徹底的にテストし、正しくレンダリングされることを確認してください。

以上がメディア クエリがブラウザでは機能しないのに、モバイル デバイスでは機能するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。