モバイル デバイス向けの CSS の調整: @media ハンドヘルドの制限について理解する

iPhone や Android などのモバイル ブラウザ向けに CSS をカスタマイズしようとする場合は、次の点に注意することが重要です。 @media ハンドヘルドの制限事項。このメディア クエリ タイプは過去にも使用されてきましたが、モバイル デバイス、特に高度な表示機能を備えたデバイスでは広くサポートされていません。

目的の効果を実現するには、次の代替アプローチを検討してください。

使用@media スクリーン クエリ

@media ハンドヘルドの代わりに、@media スクリーン クエリを使用します。これらのクエリを使用すると、解像度やデバイス幅などの特定の画面特性に基づいてデバイスをターゲットにすることができます。たとえば、iPhone 用に Web ページのスタイルを設定するには:

@media screen and (max-device-width: 480px) {
  body {
    color: red;
  }
}

CSS 機能クエリの活用

また、CSS 機能クエリを使用して、特定のブラウザ機能を検出することもできます。たとえば、メディア クエリがサポートされているかどうかを確認するには:

@supports (media) {
  /* Styles to be applied if media queries are supported */
}

デバイス解像度のターゲット設定

特定の解像度のデバイスをターゲットにするには、@media クエリを解像度メディア機能と組み合わせることができます:

@media screen and (max-device-width: 480px) and (resolution: 163dpi) {
  body {
    color: blue;
  }
}

その他のリソース

• [メディア クエリに関する W3C 候補の推奨事項](https://www.w3.org/TR/css3-mediaqueries/)
• [Apple のモバイル Webkit 開発者]ガイド](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/GettingStarted/GettingStarted.html)
• [別のリスト: 複数のビューポートの設計](https: //alistapart.com/article/viewports)