iPhone 5的CSS媒体查询
iPhone 5有更长的屏幕，并没有捕捉到我的网站的移动视图。 什么是新的响应式devise查询的iPhone 5，我可以结合现有的iPhone查询？
我目前的媒体查询是这样的：
@media only screen and (max-device-width: 480px) {} 另一个有用的媒体function是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型号比较
长宽比计算器
有这个，我信任这个博客 ：
@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 */ }
注意：我还没有testing过上面的代码，但是我已经testing了逗号分隔的@media查询，并且它们工作得很好。
请注意，以上可能会遇到一些其他设备，如Galaxy Nexus。 这是一个额外的方法，将只针对具有640像素（560像素，由于一些奇怪的显示像素exception）和960像素（iPhone <5）和1136像素（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 */ }
上面列出的所有这些答案，使用max-device-width或max-device-height媒体查询，遭受非常强大的bug：他们也瞄准了很多其他stream行的移动设备 （可能是不需要的，从来没有testing，或将打未来的市场）。
这个查询将适用于任何具有较小屏幕的设备 ，并且可能会破坏您的devise。
结合类似的设备特定的媒体查询（HTC，三星，iPod，Nexus的…）这种做法将推出一个定时炸弹。 对于debigging，这个想法可以让你的CSS一个不受控制的spagetti。 你永远不能testing所有可能的设备。
请注意，唯一的媒体查询总是针对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*/ }
请注意， 确切的宽度和高度，而不是最大宽度在这里被检查。
现在，解决scheme是什么？ 如果你想写一个网页，在所有可能的设备上看起来不错，最好的做法是使用降级
/ *退化模式我们正在检查屏幕宽度只有肯定，这将改变是从肖像转向风景* /
/*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)
没有一个响应适用于我的目标phonegapp应用程序。
以下链接点下面的解决scheme工作。
@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { // css here }
只是一个非常快速的补充，因为我一直在testing一些选项，并一路错过了这一点。 确保你的页面有：
<meta name="viewport" content="initial-scale=1.0">
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*/ }
在移动设备的媒体function数据库中，您可以很容易地为iPhone5及其他智能手机获得答案：
http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html
您甚至可以在同一网站上的testing页上获取您自己的设备值。
（免责声明：这是我的网站）
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 */ }
