iPhone 5 的屏幕较长，无法捕捉我网站的移动视图。 iPhone 5 有哪些新的响应式设计查询，我可以与现有的 iPhone 查询结合使用吗？
我当前的媒体查询是这样的：
@media only screen and (max-device-width: 480px) {}
【问题讨论】：
标签： iphone css responsive-design media-queries iphone-5
另一个有用的媒体功能是device-aspect-ratio。
请注意，iPhone 5 没有 16:9 的纵横比。实际上是 40:71。
iPhone @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
【讨论】：
and (-webkit-min-device-pixel-ratio: 2) 以使其在 @TaeKwonJoe 所述的 PhoneGap webview 中工作
有这个，我归功于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。 这是另一种方法，它仅针对尺寸为 640 像素（560 像素由于一些奇怪的显示像素异常）和介于 960 像素（iPhone
@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 */
}
【讨论】：
iPhone 5 and not to iOS 6？应该是：“iPhone5 而不是 iPhone 6”？
上面列出的所有这些答案，使用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*/
}
注意exact宽度和高度，而不是在这里检查最大宽度。
现在，解决方案是什么？如果您想编写一个在所有可能的设备上看起来都不错的网页，最好的做法是使用降级
/* 退化模式 我们只检查屏幕宽度 当然，这将改变是从纵向变成横向*/
/*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。这将加快移动浏览器的网页呈现速度。
【讨论】：
对我来说，完成这项工作的查询是：
only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)
【讨论】：
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*/
}
【讨论】：
max-device-width : 568px？
device-width: 320px and device-height: 568px？
针对 phonegapp 应用程序的响应均不适用于我。
作为以下link 点，以下解决方案有效。
@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
// css here
}
【讨论】：
只是一个非常快速的补充，因为我一直在测试一些选项并在此过程中错过了这一点。确保您的页面有：
<meta name="viewport" content="initial-scale=1.0">
【讨论】：
您可以在移动设备的媒体功能数据库中轻松获得 iPhone5 以及其他智能手机的答案：
http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html
您甚至可以在同一网站的测试页面上获取自己的设备值。
（免责声明：这是我的网站）
【讨论】：
afaik 没有 iPhone 使用 1.5 的像素比
iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1) iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)
【讨论】：
/* 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) {
}
}
【讨论】：
您可能应该将“-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 */
}
【讨论】：