如何使用媒体查询来定位 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 的一般查询另外

要同时定位 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中文网其他相关文章！