iPhone 5的屏幕更长，我的网站移动视图无法适应。有哪些适用于iPhone 5的新响应式设计查询语句，我能否与现有的iPhone查询语句相结合？
我的当前媒体查询如下：
@media only screen and (max-device-width: 480px) {}
iPhone 5 CSS媒体查询
132
- Maverick
2
3你能否展示你现有的媒体查询代码？ - BoltClock
试试这个？http://halgatewood.com/iphone-5-media-query/ - sachleen
11个回答
287
另一个有用的媒体特性是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) {}
- 2C-B
8
2我喜欢这种方法，但在PhoneGap应用程序的webview中无法正常工作，直到根据Stephen Sprawl的解释添加了-webkit-min-device-pixel-ratio。http://zsprawl.com/iOS/2012/09/css-media-queries-for-the-iphone-5。@media screen and (device-aspect-ratio: 40/71) and (-webkit-min-device-pixel-ratio: 2) {
//iphone5 for teh phonegaps
} - TaeKwonJoe
我不得不在iPhone 5媒体查询中添加
and (-webkit-min-device-pixel-ratio: 2)，以使其在PhoneGap webview中正常工作，正如@TaeKwonJoe所述。 - Mahendra Liya1谢谢您更新以包括iPhone 6！ - Maverick
这在我需要在CSS中区分iPhone 4和iPhone 5时非常有效。 - euccas
1对于 iPhone 6，(device-aspect-ratio: 667/375) 在真实的物理 iPhone 6 上无法工作。但在 iOS 模拟器上可以正常工作。我将其更改为 375/667，在实际设备上也可以正常工作。 - do what now
显示剩余3条评论
65
以下内容取自此博客：
@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 */
}
NB: 上面的代码我没有测试过，但是我已经测试过逗号分隔的 @media 查询了，它们工作得很好。
请注意上述代码可能会影响其他共享相似比例的设备，例如Galaxy Nexus。这里有一种额外的方法，只能针对其中一个维度为640px（由于某些奇怪的显示像素异常而为560px），另一个维度在960px（iPhone <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 */
}
- Cat
6
1你能建议我如何将这个查询与我的旧查询结合起来，以捕获 iPhone 4 和 5 吗？ - Maverick
6请注意，这将影响其他手机，不仅仅是iPhone。例如三星Galaxy Nexus。 - Mike Sweeney
@MikeSweeney 不错的建议。我已经更新了我的帖子，使用了一种新的方法，不应包括其他设备。 - Cat
@Eric 在进行了一系列跨手机测试后，我最终选择了这个方案 - 必须将高度考虑在内！在我测试的7-8种不同型号的手机上似乎运行良好。 - Mike Sweeney
这行代码正确吗：
iPhone 5 and not to iOS 6？它应该是："iPhone 5 and not to iPhone 6"吗？ - Sgnl@Sgnl 实际上，这行代码是正确的。但鉴于帖子发布以来的更改，我将对其进行编辑以使其更加清晰明了。 - Cat
39
所有上述列出的答案，使用max-device-width或max-device-height进行媒体查询的方法，都存在一个非常严重的 bug 问题：它们还会针对许多其他流行的移动设备进行匹配（可能是不需要的或从未经过测试的，或者将来可能上市的设备）。
这些查询将适用于任何屏幕更小的设备，很可能导致您的设计出现问题。
结合类似的特定于设备的媒体查询（例如HTC、三星、IPod、Nexus等），这种做法将启动一个定时炸弹。对于调试，这种想法会使您的 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*/
}
请注意，这里检查的是确切的宽度和高度，而不是最大宽度。
那么，解决方案是什么呢？如果您想编写一个在所有可能的设备上都能看起来很好的网页，最佳实践是使用退化模式。
/* 退化模式 我们只检查屏幕宽度 当从纵向切换到横向时，这肯定会改变 */
/*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。这将加速移动浏览器的网页渲染。
- Dan
6
10我会采用渐进增强和移动优先的策略。也就是从移动端开始构建，使用min-device-width逐步扩展。 - primavera133
2还要注意的是，仅匹配iPhone 5的高度/宽度/像素比解决方案也将匹配下一个具有相同特征的手机。您回答的总体主题是正确的：以“特定设备”为思考方式是错误的。 - Pointy
@Dan - 尽管你的回答并没有直接回答问题，但它从响应式设计的最佳实践的更广泛视角来看待了这个问题。我认为你在这里写的东西非常深刻和实用。五星好评。 - Dimitri Vorontzov
@Dan - 尝试实现您的建议时，有些东西出了问题。请问您可以帮忙看一下吗：http://stackoverflow.com/questions/16486078/only-the-smallest-max-device-width-media-query-is-applied - Dimitri Vorontzov
@Primavera，请解释一下。移动优先的方法有什么好处？ - S..
为那些处理器性能较弱的设备设置基础CSS。CSS覆盖指向那些（桌面等）性能更强的设备。 - primavera133
8
对我来说，完成这项工作的查询是：
only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)
- eli philosoph
8
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*/
}
- Sudheer
3
为什么在竖屏模式下需要
max-device-width: 568px？ - adi5181@adi518 如果您不使用max-width，则CSS规则将适用于大于320px的任何设备，这几乎包括所有设备-平板电脑、台式机等。 - Sudheer
1为什么不使用
device-width: 320px 和 device-height: 568px 呢？ - adi5185
对于针对PhoneGap应用的响应，以上方案均不适用。
如下链接所示，以下解决方案可行。
@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
// css here
}
- ppcano
5
作为一个快速的补充，我测试了一些选项，在此过程中可能会忽略这个问题。确保你的页面包含：
<meta name="viewport" content="initial-scale=1.0">
- Mike Wells
3
你可以在移动设备媒体功能数据库上轻松获取iPhone5和其他智能手机的答案：
（免责声明：这是我的网站）
http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html
你甚至可以在同一网站的测试页面上获取自己设备的值。（免责声明：这是我的网站）
- pieroxy
0
/* 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) {
}
}
- Arthur Yakovlev
0
据我所知，没有任何一款iPhone使用1.5的像素比率
iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1) iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)
- noreabu
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接