@media handheld がモバイル CSS の信頼できるソリューションではないのはなぜですか?

モバイル デバイス向けの 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)
• [A リストApart: 複数のビューポートのデザイン](https://alistapart.com/article/viewports)

以上が@media handheld がモバイル CSS の信頼できるソリューションではないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。