iPhone 5 の固有の画面サイズに合わせて Web サイトの CSS メディア クエリを最適化するにはどうすればよいですか?

iPhone 5 向けモバイル ビューの最適化: CSS メディア クエリの調整

iPhone 5 の細長い画面では、既存のモバイル ビュー クエリが効果的に機能しない可能性がありますその次元を捉えます。したがって、特に iPhone 5 に合わせてメディア クエリを調整し、Web サイトの最適な表示を確保することが重要になります。

既存のクエリの結合

既存のメディア クエリデバイスの幅制限に基づいています。古い iPhone でも機能する可能性がありますが、iPhone 5 の独自の寸法に合わせて調整されていません。これに対処するには、デバイス アスペクト比機能と組み合わせます。

@media only screen and (max-device-width: 480px) and (device-aspect-ratio: 40/71) {}

このクエリは、iPhone に固有の最大幅 480 ピクセル、アスペクト比 40:71 のデバイスをターゲットとします。 5.

デバイスアスペクトの活用比率

iPhone 5 のアスペクト比は、他のほとんどのスマートフォンで使用される一般的な 16:9 形式とは異なります。デバイス アスペクト比機能を使用すると、さまざまな iPhone モデルに対象を絞ったクエリを作成できます。

• iPhone < 5: @media 画面と (デバイス アスペクト比: 2/3) {}
• iPhone 5: @media 画面と (デバイス アスペクト比: 40/ 71) {}
• iPhone 6: @media 画面と(デバイス アスペクト比: 375/667) {}
• iPhone 6 Plus: @media 画面と (デバイス アスペクト比: 16/9) {}

これにより、特定の iPhone モデルごとに Web サイトの外観を微調整して制御できるようになり、モバイル ビューが確実に表示されます。各デバイスの固有の画面サイズに合わせて最適化されています。

以上がiPhone 5 の固有の画面サイズに合わせて Web サイトの CSS メディア クエリを最適化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。