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-widthmax-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 */ }