「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > メディアクエリを使用して、iPhone 6、6 Plus、および将来のAppleデバイスを見つけます

メディアクエリを使用して、iPhone 6、6 Plus、および将来のAppleデバイスを見つけます

2025-04-19に投稿されました
ブラウズ:534

How Can I Use Media Queries to Target iPhone 6, 6 Plus, and Future Apple Devices?

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

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

landscape

@メディアのみの画面 および(Min-Device-Width:375px) および(Max-Device-Width:667px) および(オリエンテーション:風景) および(-webkit-min-device-pixel-ratio:2) {}

  • Portrait

    @media only screen 
      and (min-device-width : 375px) 
      and (max-device-width : 667px) 
      and (orientation : landscape) 
      and (-webkit-min-device-pixel-ratio : 2) 
    { }
  • ポートレート:750 x 1334(@2x)

    @media only screen 
      and (min-device-width : 375px) 
      and (max-device-width : 667px)
      and (orientation : portrait) 
      and (-webkit-min-device-pixel-ratio : 2) 
    { }
  • app icon:120 x 120
  • [is] queries
  • for iPhone 6 Plusでは、これらのメディアクエリを使用してください:
landscape

@メディアのみの画面 および(Min-Device-Width:414px) および(Max-Device-Width:736px) および(オリエンテーション:風景) および(-webkit-min-device-pixel-ratio:3) {}

Portrait
  • @メディアのみの画面 および(Min-Device-Width:414px) および(Max-Device-Width:736px) および(オリエンテーション:ポートレート) および(-webkit-min-device-pixel-ratio:3) {}

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

    app icon:180
    @media only screen 
      and (min-device-width : 414px) 
      and (max-device-width : 736px)
      and (orientation : portrait) 
      and (-webkit-min-device-pixel-ratio : 3) 
    { }
  • をターゲットにするために、次のクエリを使用できます:
  • @メディアのみの画面 および(Max-Device-Width:640px)、 スクリーンと(最大デバイス幅:667px)のみ、 画面と(最大幅:480px)のみ {}
  • 将来のリリースのデバイスの予測
Appleは、iPhone 7やApple Watchなどの将来のデバイスに関する限られた情報をリリースしました。ただし、iPhone 6および6 Plusの仕様に基づいて、同様の命名規則を想定して、次のメディアクエリは将来的に役立つ場合があります:

iPhone 7(予測):

@メディアスクリーン および(Min-Device-Width:1080px) および(Max-Device-Width:1920px) および(最小解像度:401dpi) および(device-aspect-ratio:16/9) {} @media画面 および(Min-Device-Width:750px) および(Max-Device-Width:1334px) および(最小解像度:326dpi) {}
@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px)
{ }

Apple Watch(投機的):は、40mm-42mm前後の画面サイズを想定しています (Max-Device-Width:42mm) および(Min-Device-Width:38mm) {}

最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3