iPhone 5 CSS媒体查询?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (35)

iPhone 5的新设计查询是什么?我可以与现有的iPhone查询结合起来吗?

我当前的媒体查询如下:

@media only screen and (max-device-width: 480px) {}
提问于
用户回答回答于

另一个有用的媒体功能是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 Plus:

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

iPad:

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

用户回答回答于

@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之前的查询,它们工作得很好。

请注意,上面提到的可能会碰到其他一些具有相似比率的设备,比如GalaxyNexus。这是另外一种方法,它只针对一维的640 px(560 px,由于一些奇怪的显示像素异常)和960 px(iphone<5)和1136 px(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 */
}

扫码关注云+社区