iPhone 5 CSS 媒体查询

Posted 2023-03-06

【中文标题】iPhone 5 CSS 媒体查询

【英文标题】：iPhone 5 CSS media query

【发布时间】：2012-09-14 10:01:03

【问题描述】：

iPhone 5 的屏幕较长，无法捕捉我网站的移动视图。 iPhone 5 有哪些新的响应式设计查询，我可以与现有的 iPhone 查询结合使用吗？

我当前的媒体查询是这样的：

@media only screen and (max-device-width: 480px) 

【问题讨论】：

我们可以查看您现有的媒体查询吗？

试试这个？ halgatewood.com/iphone-5-media-query

【参考方案1】：

另一个有用的媒体功能是device-aspect-ratio。

请注意，iPhone 5 没有 16:9 的纵横比。实际上是 40:71。

iPhone @media screen and (device-aspect-ratio: 2/3)

iPhone 5：@media screen and (device-aspect-ratio: 40/71)

iPhone 6：@media screen and (device-aspect-ratio: 375/667)

iPhone 6 Plus：@media screen and (device-aspect-ratio: 16/9)

iPad：@media screen and (device-aspect-ratio: 3/4)

参考：Media Queries @ W3C iPhone Model Comparison Aspect Ratio Calculator

【讨论】：

我喜欢这种方法，但在添加 -webkit-min-device-pixel-ratio 之前无法让它在 PhoneGap 应用程序 webview 中工作，正如 Stephen Sprawl zsprawl.com/ios/2012/09/css-media-queries-for-the-iphone-5 所解释的那样。 @media screen and (device-aspect-ratio: 40/71) and (-webkit-min-device-pixel-ratio: 2) //iphone5 for teh phonegaps

我必须在 iPhone 5 媒体查询中添加 and (-webkit-min-device-pixel-ratio: 2) 以使其在 @TaeKwonJ​​oe 所述的 PhoneGap webview 中工作

感谢您更新此内容以包括 iPhone 6！

当我需要在 css 中区分 iphone 4 和 iphone 5 时，这非常有效。

对于 iphone 6，（设备纵横比：667/375）在真正的物理 iphone 6 上不起作用。但它在 iOS 模拟器上运行。我将其更改为 375/667，它可以在物理设备上运行。

【参考方案2】：

有这个，我归功于this blog：

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) 
    /* iPhone 5 only */

请记住，它对 iPhone 5 做出反应，而不是对安装在所述设备上的特定 iOS 版本做出反应。

要与您现有的版本合并，您应该能够用逗号分隔它们：

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) 
    /* iPhone only */

注意：我没有测试过上面的代码，但是我之前测试过逗号分隔的@media 查询，它们工作得很好。

请注意，上述方法可能会影响其他一些具有相似比率的设备，例如 Galaxy Nexus。 这是另一种方法，它仅针对尺寸为 640 像素（560 像素由于一些奇怪的显示像素异常）和介于 960 像素（iPhone

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) 
    /* iPhone only */

【讨论】：

您能否建议我如何将此查询与我的旧查询结合起来以同时捕获 iphone 4 和 5？

小心，因为这也会影响其他手机——不仅仅是iphone。三星 Galaxy Nexus 就是一个例子。

@MikeSweeney 好电话。我用一种不应包含其他设备的新方法更新了我的帖子。

@Eric 在进行了一系列跨手机测试后，我最终决定的就是这个——必须将高度融入其中！在我测试的 7 到 8 部不同的手机上似乎都运行良好。

这一行是否正确：iPhone 5 and not to iOS 6？应该是：“iPhone5 而不是 iPhone 6”？

【参考方案3】：

上面列出的所有这些答案，使用max-device-width 或max-device-height 进行媒体查询，都存在非常严重的错误：它们还针对许多其他流行的移动设备（可能不需要并且永远不会测试，否则将在未来投放市场）。

此查询适用于任何屏幕较小的设备，您的设计可能会被破坏。

结合类似的特定于设备的媒体查询（针对 HTC、三星、iPod、Nexus...），这种做法将引爆定时炸弹。对于 debigging，这个想法可以使您的 CSS 成为不受控制的意大利面条。您永远无法测试所有可能的设备。

请注意，唯一的媒体查询始终以 iPhone5 为目标，是：

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ 
                 /*IPhone 5 only CSS here*/

注意exact宽度和高度，而不是在这里检查最大宽度。

---

现在，解决方案是什么？如果您想编写一个在所有可能的设备上看起来都不错的网页，最好的做法是使用降级

/* 退化模式 我们只检查屏幕宽度 当然，这将改变是从纵向变成横向*/

/*css for desktops here*/

@media (max-device-width: 1024px) 
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/

@media (max-device-width: 640px) 
 /*Iphone portrait and smaller*/

@media (max-device-width: 540px) 
 /*Smaller and smaller...*/

@media (max-device-width: 320px) 
 /*IPhone portrait and smaller. You can probably stop on 320px*/

如果您的网站访问者中有 30% 以上来自移动设备，请颠倒此方案，提供移动优先的方法。在这种情况下使用min-device-width。这将加快移动浏览器的网页呈现速度。

【讨论】：

我会先进行渐进增强和移动。这是从移动设备开始并使用 min-device-width 构建的。

另外请注意，仅匹配 iPhone 5 的高度/宽度/像素比解决方案也将匹配出现的下一款恰好具有相同特征的手机。您回答的总体主题是正确的：考虑特定设备是错误的继续方式。

@Dan – 尽管您的回答没有直接解决问题，但它会从响应式设计最佳实践的更广泛视角来看待它。在我看来，你在这里写的东西非常深刻和实用。五颗星。

@Dan - 尝试实施您的建议，但有些东西不起作用。能否请您看一下：***.com/questions/16486078/…

@primavera，请说出原因。移动优先方法的优势是什么？

【参考方案4】：

对我来说，完成这项工作的查询是：

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

【参考方案5】：

iPhone 5 纵向和横向

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 

/* styles*/

iPhone 5 横屏

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape)  
/* styles*/

iPhone 5 纵向

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait)  
 /* styles*/

【讨论】：

为什么在纵向上需要max-device-width : 568px？

为什么不改用device-width: 320px and device-height: 568px？

【参考方案6】：

针对 phonegapp 应用程序的响应均不适用于我。

作为以下link 点，以下解决方案有效。

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) 
    // css here

【参考方案7】：

只是一个非常快速的补充，因为我一直在测试一些选项并在此过程中错过了这一点。确保您的页面有：

<meta name="viewport" content="initial-scale=1.0">

【参考方案8】：

您可以在移动设备的媒体功能数据库中轻松获得 iPhone5 以及其他智能手机的答案：

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

您甚至可以在同一网站的测试页面上获取自己的设备值。

（免责声明：这是我的网站）

【参考方案9】：

afaik 没有 iPhone 使用 1.5 的像素比

iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1) iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)

【参考方案10】：

/* iPad */
@media screen and (min-device-width: 768px) 
    /* ipad-portrait */
    @media screen and (max-width: 896px)  
        .logo
            display: none !important;
        
    
    /* ipad-landscape */
    @media screen and (min-width: 897px)  

    

/* iPhone */
@media screen and (max-device-width: 480px) 
    /* iphone-portrait */
    @media screen and (max-width: 400px)  

    
    /* iphone-landscape */
    @media screen and (min-width: 401px)  

    

【参考方案11】：

您可能应该将“-webkit-min-device-pixel-ratio”降低到 1.5 以捕获所有 iPhone？

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) 
/* iPhone only */

【讨论】：

哪款 iPhone 使用的设备像素比为 1.5？

我强烈建议根据设备宽度而不是设备名称 (iPhone) 进行媒体查询。因此，如果 iPhone 5 的宽度更大，那就让它可用。