iPhone 5 CSS 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12539697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPhone 5 CSS media query
提问by Maverick
The iPhone 5 has a longer screen and it's not catching my website's mobile view. What are the new responsive design queries for the iPhone 5 and can I combine with existing iPhone queries?
iPhone 5 有一个更长的屏幕，它没有捕捉到我网站的移动视图。iPhone 5 有哪些新的响应式设计查询，我可以与现有的 iPhone 查询结合使用吗？
My current media query is this:
我目前的媒体查询是这样的：
@media only screen and (max-device-width: 480px) {}
回答by 2C-B
Another useful media feature is device-aspect-ratio.
另一个有用的媒体功能是device-aspect-ratio.
Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71.
请注意，iPhone 5 没有 16:9 的纵横比。实际上是 40:71。
iPhone < 5:@media screen and (device-aspect-ratio: 2/3) {}
iPhone < 5：@media screen and (device-aspect-ratio: 2/3) {}
iPhone 5:@media screen and (device-aspect-ratio: 40/71) {}
iphone 5：@media screen and (device-aspect-ratio: 40/71) {}
iPhone 6:@media screen and (device-aspect-ratio: 375/667) {}
iPhone 6：@media screen and (device-aspect-ratio: 375/667) {}
iPhone 6 Plus:@media screen and (device-aspect-ratio: 16/9) {}
iPhone 6 加：@media screen and (device-aspect-ratio: 16/9) {}
iPad:@media screen and (device-aspect-ratio: 3/4) {}
iPad：@media screen and (device-aspect-ratio: 3/4) {}
Reference:
Media Queries @ W3C
iPhone Model Comparison
Aspect Ratio Calculator
回答by Eric
There is this, which I credit to 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 */
}
Keep in mind it reacts the iPhone 5, not to the particular iOS version installed on said device.
请记住，它对 iPhone 5 做出反应，而不是对安装在所述设备上的特定 iOS 版本做出反应。
To merge with your existing version, you should be able to comma-delimit them:
要与现有版本合并，您应该能够用逗号分隔它们：
@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 */
}
NB: I haven't tested the above code, but I've tested comma-delimited @mediaqueries before, and they work just fine.
注意：我没有测试过上面的代码，但我之前测试过逗号分隔的@media查询，它们工作得很好。
Note that the above may hit some other devices which share similar ratios, such as the Galaxy Nexus.Here is an additional method which will target only devices which have one dimension of 640px (560px due to some weird display-pixel anomalies) and one of between 960px (iPhone <5) and 1136px (iPhone 5).
请注意，上述内容可能会影响其他一些具有相似比率的设备，例如 Galaxy Nexus。这是一种额外的方法，它仅针对尺寸为 640 像素（由于一些奇怪的显示像素异常导致 560 像素）和 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 */
}
回答by Dan
All these answers listed above, that use max-device-widthor max-device-heightfor media queries, suffer from very strong bug: they also target a lot of other popular mobile devices(probably unwanted and never tested, or that will hit the market in future).
上面列出的所有这些使用max-device-width或max-device-height用于媒体查询的答案都存在非常严重的错误：它们还针对许多其他流行的移动设备（可能不需要且从未测试过，或者将来会投放市场）。
This queries will work for any device that has a smaller screen, and probably your design will be broken.
此查询适用于任何屏幕较小的设备，并且您的设计可能会被破坏。
Combined with similar device-specific media queries (for HTC, Samsung, IPod, Nexus...) this practice will launch a time-bomb. For debigging, this idea can make your CSS an uncontrolled spagetti. You can never test all possible devices.
结合类似的特定于设备的媒体查询（对于 HTC、三星、iPod、Nexus...），这种做法将发射定时炸弹。对于调试，这个想法可以使您的 CSS 成为不受控制的意大利面条。您永远无法测试所有可能的设备。
Please be aware that the only media query always targeting IPhone5 and nothing else, is:
请注意，始终针对 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*/
}
Note that exactwidth and height, not max-width is checked here.
请注意，此处检查的是确切的宽度和高度，而不是最大宽度。
Now, what is the solution? If you want to write a webpage that will look good on all possible devices, the best practice is to you use degradation
现在，解决方案是什么？如果您想编写一个在所有可能的设备上看起来都不错的网页，最好的做法是使用降级
/* degradation pattern we are checking screen width only sure, this will change is turning from portrait to landscape*/
/* 降级模式我们只是确定检查屏幕宽度，这将改变从纵向变为横向*/
/*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*/
}
If more than 30% of your website visitors come from mobile, turn this scheme upside-down, providing mobile-first approach. Use min-device-widthin that case. This will speed up webpage rendering for mobile browsers.
如果超过 30% 的网站访问者来自移动设备，请将此方案颠倒过来，提供移动优先的方法。min-device-width在这种情况下使用。这将加速移动浏览器的网页渲染。
回答by eli philosoph
for me, the query that did the job was:
对我来说，完成这项工作的查询是：
only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)
回答by Sudheer
iPhone 5 in portrait & landscape
iPhone 5 纵向和横向
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* styles*/
}
iPhone 5 in landscape
iPhone 5 横向
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* styles*/
}
iPhone 5 in portrait
iPhone 5 纵向
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* styles*/
}
回答by Mike Wells
Just a very quick addition as I have been testing a few options and missed this along the way. Make sure your page has:
只是一个非常快速的补充，因为我一直在测试一些选项并且在此过程中错过了这一点。确保您的页面具有：
<meta name="viewport" content="initial-scale=1.0">
回答by ppcano
回答by pieroxy
You can get your answer fairly easily for the iPhone5 along with other smartphones on the media feature database for mobile devices:
对于 iPhone5 和其他智能手机，您可以在移动设备的媒体功能数据库中轻松获得答案：
http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html
http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html
You can even get your own device values on the test page on the same website.
您甚至可以在同一网站的测试页面上获取自己的设备值。
(Disclaimer: This is my website)
（免责声明：这是我的网站）
回答by noreabu
afaik no iPhone uses a pixel-ratio of 1.5
afaik 没有 iPhone 使用 1.5 的像素比
iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1) iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)
iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1) iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)
回答by Arthur Yakovlev
/* 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) {
}
}
