iPhone 5 CSS媒体查询

Question

iPhone 5有一个更长的屏幕,它没有捕捉我的网站的移动视图.什么是iPhone 5的新响应式设计查询,我可以与现有的iPhone查询结合使用吗？

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

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

Answer 1

另一个有用的媒体功能是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) {}

参考:
媒体查询@ W3C
iPhone模型比较
宽高比计算器

Answer 2

有这个,我赞同这个博客:

@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.这是另一种方法,它只针对一维640px(560px,由于一些奇怪的显示像素异常)和一个960px(iPhone <5)和1136px(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 */
}

Answer 3

上面列出的所有这些答案,使用max-device-width或max-device-height用于媒体查询,都会遇到非常强烈的错误:它们还针对许多其他流行的移动设备(可能不需要,从未测试过,或将来会打入市场).

此查询适用于屏幕较小的任何设备,可能您的设计将被破坏.

结合类似设备特定的媒体查询(对于HTC,三星,iPod,Nexus ......),这种做法将发布定时炸弹.对于debigging,这个想法可以使你的CSS成为一个不受控制的spagetti.您永远无法测试所有可能的设备.

请注意,唯一一个始终以iPhone 5为目标的媒体查询是:

/* 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在那种情况下使用.这将加快移动浏览器的网页呈现速度.

Answer 4

对我来说,完成这项工作的查询是:

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

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

}

Answer 6

我没有针对phonegapp应用程序的响应.

如下面的链接点,下面的解决方案有效.

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

Answer 7

只是一个非常快速的添加,因为我一直在测试一些选项,并错过了这一过程.确保您的页面包含:

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