メディア クエリを使用して Web サイトを iPhone 6 および iPhone 6 Plus 用に最適化するにはどうすればよいですか?

iPhone 6 および 6 Plus のメディア クエリ: 総合ガイド

経験豊富な iOS 開発者でも、初心者でも、次のことを行えます。 Apple のモバイル デバイス エコシステムに見られるさまざまな画面サイズに合わせてアプリケーションを最適化するために不可欠です。このラインナップに最近追加されたのは、iPhone 6 と 6 Plus です。アプリケーションがこれらのデバイスにシームレスに適応できるように、この記事では、対象とする必要がある特定の画面サイズとメディア クエリに関する詳細なガイダンスを提供します。

iPhone 6

画面サイズ 375 x 667 ピクセル、解像度 1334 x 750 の iPhone 6 は、前モデルよりも広いディスプレイを提供します。コンテンツを最適化するための対応するメディア クエリは次のとおりです:

@media only screen 
    and (min-device-width : 375px) // or 213.4375em or 3in or 9cm
    and (max-device-width : 667px) // or 41.6875em
    and (width : 667px) // or 41.6875em
    and (height : 375px) // or 23.4375em
    and (orientation : landscape) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 667/375)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

@media only screen 
    and (min-device-width : 375px) // or 213.4375em
    and (max-device-width : 667px) // or 41.6875em
    and (width : 375px) // or 23.4375em
    and (height : 559px) // or 34.9375em
    and (orientation : portrait) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 375/559)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

iPhone 6 Plus

より大きな iPhone 6 Plus は、414 x 736 ピクセルという十分な画面サイズを誇ります。解像度は 1920 x 1080 です。これらのメディア クエリを利用して、 content:

@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 3) 
{ }

@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px)
    and (device-width : 414px)
    and (device-height : 736px)
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3) 
    and (-webkit-device-pixel-ratio : 3)
{ }

iPhone 6 と 6 Plus の両方をターゲット

両方の iPhone モデルを同時にサポートすることを目的としている場合は、次のメディア クエリを使用します:

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px)
{ }

追加考慮事項

今後の iPhone モデルで予測されるメディア クエリ

Apple によると、将来の iPhone モデルにはさらに高い解像度の画面が搭載される可能性があります。これらの予測に基づいて、次のメディア クエリを長期的な最適化戦略に組み込むことを検討してください。

@media screen 
    and (min-device-width : 1080px) 
    and (max-device-width : 1920px) 
    and (min-resolution: 401dpi) 
    and (device-aspect-ratio:16/9) 
{ }

@media screen 
    and (min-device-width : 750px) 
    and (max-device-width : 1334px) 
    and (min-resolution: 326dpi) 
{ }

Apple Watch のメディア クエリ (推測)

正確なApple Watch の仕様はまだ少し曖昧ですが、既知の画面サイズに基づくと、これらのメディア クエリによって証明される可能性があります。便利:

@media (!small) and (damn-small), (omfg) { }

@media 
    (max-device-width:42mm) 
    and (min-device-width:38mm) 
{ }

ウェアラブル デバイス市場が進化するにつれて、メディア クエリ レベル 4 は、特定のデバイスとフォーム ファクターをターゲットにする機能をさらに強化します。

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