我正在尝试获取仅针对较小设备的媒体查询，特别是 iPhone4 与 iPhone5 和更大的设备。我什至没有启动android。 I tried the media queries I found here但我没有任何运气。
这是一个简单的测试。
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="format-detection" content="telephone=no" />
<style>
body { background-color: blue; }
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
body { background-color: red; }
}
</style>
</head>
<body>
Testing
</body>
</html>
我原以为它只在 iPhone4/4S 上是红色，其他地方都是蓝色，但在 iPhone4/4S/5/5s/6/6Plus 上却是红色。在 iPadAir、iPad Retina 和台式机上为蓝色。
我尝试从同一页面添加 iPhone5/5s 查询，因此我同时拥有 iPhone4/4s 查询和 iPhone5/5s 查询。在这种情况下，我在 4/4s/5/5s/6/6Plus 上变绿，而我应该在 4/4s 上变红，在 5/5s 上变绿，在其他地方变蓝。
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
body { background-color: green; }
}
我尝试了一些其他的东西。我摆脱了所有的元标签。不用找了。我真的不关心最小设备像素比。我只关心屏幕是太小还是不太小。够大的是iPhone5/5s。任何更小的东西我都需要做一些特殊的事情。
如何让它在 iPhone4 上只显示红色？ (或小于 iPhone5/5s)
注意:我试图避免对 iPhone4 进行设置，然后对更大的设备进行重置，因为我有大约 20 个设置需要针对小屏幕进行更改。换句话说，20 个设置是默认设置，只有 iPhone4 大小的屏幕才需要更改这些设置。如果可能的话，我不想设置它们 3 次。
换句话说我想要这个
default css
iPhone4 {
a few overrides
}
不是这个
default css
iPhone4 {
a few overrides
}
notIPhone4 {
try to undo overrides // :(
}
最佳答案
您可以使用 device-aspect-ratio 这是媒体查询的另一个重要特性:
body { background-color: blue; }
@media screen and (device-aspect-ratio: 2/3) {
body { background-color: red; }
}
这是我从 here 得到的更多device-aspect-ratio :
- iPhone < 5:
@media 屏幕和(设备长宽比:2/3){} - iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {} - iPhone 6:
@media screen and (device-aspect-ratio: 667/375) {} - iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}
如果你只想定位一个型号，你也可以非常具体，例如对于 iPhone 6 Plus，我使用从 here 获得的以下内容:
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (device-width : 414px)
and (device-height : 736px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 3)
and (-webkit-device-pixel-ratio : 3)
{ ... }
关于ios - iPhone4/4S 对比其他媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30524391/