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＆lt; 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 Queries @ W3C
iPhone Model Comparison
Aspect Ratio Calculator

Answer 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。这是另一种方法，它只针对一维640px（550px，因为一些奇怪的显示像素异常）和960px（iPhone＆lt; 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

这些回复都不适合我定位到手机广告应用。

如下面的link点，下面的解决方案有效。

@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">

Answer 8

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

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

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

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

Answer 9

afaik没有iPhone使用像素比率为1.5

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

Answer 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) { 

    }
}

Answer 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 5 CSS媒体查询

11 个答案: