CSS メディア クエリを使用して iPhone 5 の独自のアスペクト比に合わせて Web サイトを最適化するにはどうすればよいですか?

iPhone 5 の CSS メディア クエリ: 細長い画面の応答性の強化

iPhone 5 では画面の寸法が大幅に変更され、新たな問題が生じました。レスポンシブデザインへの挑戦。これに対処するには、このデバイスの固有の特性に対応する追加のメディア クエリが必要です。

考慮すべき重要な要素の 1 つは、画面の高さと幅の比率を表すアスペクト比です。 iPhone 5 は、一般的な 16:9 のアスペクト比に準拠していませんが、代わりに独自の 40:71 アスペクト比を誇ります。

iPhone 5 向けに Web サイトの応答性を最適化するには、次のメディア クエリを組み込みます。

@media screen and (device-aspect-ratio: 40/71) {}

より包括的なアプローチとして、このクエリを既存の iPhone と組み合わせることができます。 query:

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

これらのデバイス固有のメディア クエリを利用することで、Web サイトが iPhone 5 の長い画面に効果的に適応し、ユーザーに最適なユーザー エクスペリエンスを提供できるようになります。

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