メディア クエリを使用して iPhone 6、6 Plus、および将来の Apple デバイスをターゲットにするにはどうすればよいですか?

iPhone 6 および 6 Plus のメディア クエリ

特定のメディア クエリを使用して、iPhone 6 や 6 Plus などのデバイスをターゲットにすることができます。これらのクエリは、さまざまなパラメータを利用して、画面サイズ、解像度、その他のデバイス固有の特性に基づいてターゲットのデバイスを正確に識別します。

iPhone 6 クエリ

iPhone の場合6、次のメディア クエリを実行できます。採用:

• 風景

  @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 2) 
  { }

  ログイン後にコピー

• ポートレート

  @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px)
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2) 
  { }

  ログイン後にコピー
• 起動画像
• 縦向き: 750 x 1334 (@2x)
• 横: 1334 x 750 (@2x)
• アプリアイコン: 120 x 120

iPhone 6 Plus クエリ

iPhone 6 Plus の場合は、次を使用します。これらのメディア クエリ:

• 風景

  @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 (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3) 
  { }

  ログイン後にコピー
• 起動画像
• 縦: 1242 x 2208 (@3x)
• 横: 2208 x 1242 (@3x)
• アプリアイコン: 180 x 180

iPhone 6 および6 Plus

iPhone 6 と 6 Plus の両方のデバイスをターゲットにするには、次のクエリを使用できます:

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

将来のリリースのデバイス予測

Apple は、iPhone 7 や Apple Watch などの将来のデバイスに関する限定的な情報を公開しました。ただし、iPhone 6 および 6 Plus の仕様に基づき、同様の命名規則を想定すると、次のメディア クエリが将来役立つ可能性があります:

• iPhone 7 (予測):

  @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 (推測):
  およその画面サイズを想定40mm-42mm:

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

  ログイン後にコピー

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