Question

我正在尝试仅针对较小的设备进行媒体查询，特别是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; }
}

我试过的其他一些事情。我摆脱了所有的meta标签。没变。我真的不关心最小设备像素比。我所关心的只是屏幕太小而不是太小。足够大的是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 // :(
}

Answer 1

您可以使用device-aspect-ratio这是媒体查询的另一个重要功能：

body { background-color: blue; }
@media screen and (device-aspect-ratio: 2/3) {
    body { background-color: red; }
}

我从here获得了更多device-aspect-ratio：

iPhone＆lt; 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: 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) 
{ ... }

iPhone4 / 4S与其他媒体查询

1 个答案: