IPhone 5 CSS 媒体查询

你也许应该把“-webkit-min-device-px-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 */
}

另一个有用的媒体特性是 device-aspect-ratio。

注意，IPhone5没有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) {}

IPhone6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

IPad:
@media screen and (device-aspect-ratio: 3/4) {}

参考文献:
媒体查询@W3C
IPhone 型号比较
长宽比计算器

你可以很容易地在移动设备的媒体功能数据库中找到关于 iPhone5和其他智能手机的答案:

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

你甚至可以在同一个网站的测试页面上得到你自己的设备值。

(免责声明: 这是我的网站)

这些回应对我来说都不管用。

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

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

对我来说，起作用的问题是:

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

上面列出的所有这些使用 max-device-width或 max-device-height进行媒体查询的答案都有很强的 bug: 它们也针对 许多其他流行的移动设备(可能是不想要的，从未测试过，或者将来会上市)。

这个查询对于 任何屏幕较小的设备是有效的，并且可能会破坏您的设计。

结合类似的设备特定的媒体查询(HTC，三星，IPod，Nexus...)这种做法将发射一个定时炸弹。对于调试，这个想法可以使您的 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。这将加快移动浏览器的网页渲染速度。

Afaik no iPhone 的像素比为1.5

IPhone 3G/3GS: (- webkit-device-px-ratio: 1) IPhone 4G/4GS/5G: (- webkit-device-px-ratio: 2)

只是一个非常快的补充，因为我已经测试了一些选项，错过了这一路上。确保你的页面有:

<meta name="viewport" content="initial-scale=1.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) {


}
}

IPhone5在人像和风景方面的应用

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


/* styles*/
}

IPhone5风景画

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


}

IPhone5的肖像

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


}