132

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

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

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

11 回答 11

287

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

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

iPhone < 5:
@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 加号：
@media screen and (device-aspect-ratio: 16/9) {}

平板电脑：
@media screen and (device-aspect-ratio: 3/4) {}

参考：
媒体查询@W3C
iPhone机型比较
纵横比计算器

于 2012-10-11T20:44:40.153 回答
65

有这个，我归功于这个博客：

@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 <5）和 1136 像素（iPhone 5）之间的设备。

@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 */
}
于 2012-09-22T02:15:41.133 回答
39

上面列出的所有这些使用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*/
}

请注意，此处检查的是确切的宽度和高度，而不是最大宽度。

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

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

/*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。这将加快移动浏览器的网页渲染速度。

于 2013-01-16T17:35:00.687 回答
8

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

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)
于 2012-12-10T13:43:34.457 回答
8

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*/

}
于 2014-07-23T12:23:15.233 回答
5

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

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

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}
于 2012-12-07T10:21:26.633 回答
5

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

<meta name="viewport" content="initial-scale=1.0">
于 2013-12-02T11:48:08.700 回答
3

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

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

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

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

于 2012-10-23T13:55:10.633 回答
0

afaik 没有 iPhone 使用 1.5 的像素比

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

于 2013-03-14T11:16:11.080 回答
0 
/* 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) { 

    }
}
于 2014-04-02T15:01:46.733 回答
-3

您可能应该将“-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 */
}
于 2012-09-30T00:54:39.710 回答