モバイル デバイス用に CSS をカスタマイズする方法: @media handheld はまだ関連性がありますか?

モバイル デバイスの CSS カスタマイズ:

多くの Web 開発者は、iPhone や Android スマートフォンなどのハンドヘルド デバイスの CSS をカスタマイズする際に課題に直面します。 @media ハンドヘルドを使用する従来の方法は、デバイス間で均一に機能しません。

解決策: @media クエリを使用します

この制限を克服するには、@media クエリを使用します。この CSS テクニックを使用すると、画面サイズなどの特定のデバイス特性をターゲットにすることができます。

<link rel="stylesheet" href="iphone.css" media="only screen and (max-device-width:480px)">

このクエリは、特に最大画面幅 480 ピクセルのデバイスをターゲットにしており、通常は iPhone が対象となります。

例外としての iPhone

Safari を搭載した iPhone ブラウザは、@media ハンドヘルドを尊重しません。高度な CSS レンダリング機能を利用できます。これは古い iOS バージョンでは異なる場合があります。

高解像度のデバイスをターゲットにする

Droid X などの一部の新しいモバイル デバイスは、高解像度を備えています。これらのデバイスに対応するには、画面解像度を組み込んだより具体的な @media クエリを使用します:

<link rel="stylesheet" href="shetland.css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)">

参考資料:

• [別リスト: メディア クエリ]レスポンシブウェブ向けデザイン](https://alistapart.com/article/owned-web-design)
• [メディア クエリに関する W3C 候補の推奨事項](https://www.w3.org/TR/css3-mediaqueries/ )

以上がモバイル デバイス用に CSS をカスタマイズする方法: @media handheld はまだ関連性がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。