ホームページ > ウェブフロントエンド > CSSチュートリアル > iPhone 6 および iPhone 6 Plus をターゲットとするメディア クエリを作成するにはどうすればよいですか?

iPhone 6 および iPhone 6 Plus をターゲットとするメディア クエリを作成するにはどうすればよいですか?

Barbara Streisand
リリース: 2024-11-30 10:58:09
オリジナル
191 人が閲覧しました

How to Write Media Queries Targeting iPhone 6 and iPhone 6 Plus?

iPhone 6 および 6 Plus をターゲットとするメディア クエリ

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)  // Deprecated: aspect-ratio
    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)  // Deprecated: aspect-ratio
    and (aspect-ratio : 375/559)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }
ログイン後にコピー

ユーザーエージェント

# Safari
Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1

# Google Chrome
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102)

# Mercury
Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53
ログイン後にコピー

起動画像

  • 750 x 1334 (@2x) 縦向き
  • 1334 x 750 (@ 2x) の風景

アプリアイコン

  • 120 x 120

iPhone 6プラス

風景

@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)
{ }
ログイン後にコピー

起動画像

  • 1242 x 2208 (@3x) 縦向き
  • 2208 x 1242 (@3x) 横向き

アプリアイコン

  • 180 x 180

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 の Web サイトに基づくと、iPhone 6 Plus の予測仕様は次のとおりです。

@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 (推測)

@media 
    (max-device-width:42mm) 
    and (min-device-width:38mm) 
{ }
ログイン後にコピー

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート