CSS メディア クエリで iPad のみをターゲットにする方法

CSS メディア クエリで iPad のみをターゲットにする

CSS メディア クエリで特定のデバイスをターゲットにすることは、特にデバイスが同じような画面サイズを共有する場合に困難になることがあります。 iPad を分離するには、次のアプローチを検討してください:

Device-Width と Device-Height の使用:

提供されたメディア クエリは、デバイスの幅とデバイスの幅の両方を指定することで調整できます。 iPad に固有の高さ:

@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (min-device-height: 1024px) and (max-device-height: 1024px)

デバイス幅と解像度の組み合わせ:

または、デバイス幅とデバイス解像度を組み合わせることができます:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (min-resolution: 132dpi)

特定のスタイルシートにリンクされたメディア クエリの使用:

効率を高めるために、iPad 用に調整された個別のスタイルシートを作成し、デバイス固有のメディアに基づいて条件付きで含めることができます。クエリ:

<code class="html"><link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape)" href="ipad-landscape.css"></code>

CSS 内へのメディア クエリの組み込み:

HTTP リクエストを減らすために、メイン スタイルシート内でデバイス固有の CSS ルールを定義できます:

<code class="css">@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; }
}</code>

以上がCSS メディア クエリで iPad のみをターゲットにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。