5

我有一个嵌入式 HTML 文件，用于我的 iOS 应用程序中的帮助页面，但希望在 iPad 和 iPhone 上以不同方式显示时对某些内容进行不同的样式设置。读了一堆我已经了解了@media 语法，除了我的一生，我无法让它正常工作。鉴于下面显示的 HTML 文件，为什么它总是只显示 iPad 样式的背景（粉红色）而不是根据设备进行调整？

<head>
    <title>Help</title>

<meta name="viewport" content="width=device-width">
    <style type="text/css">
        h1 {text-align: center; font-family: "Tahoma", Geneva, sans-serif; font-size:30px; color:#ffdd00;font-weight:bold; text-shadow: rgba(0, 0, 0, 1) 2px 2px;}

        /* iphone - GREEN */
        @media only screen and (max-device-width : 480px) {
            body {background-color:#009900;}
        }

        /* ipad  - PINK */
        @media only screen and (max-device-width : 1024px) {
            body {background-color:#ff8888;} 
        }
    </style>
</head>
<body>
    <br>
    <h1> I Need Some Help!</h1>
</body>
4

3 回答 3

8

CinCSS代表“级联” 。您的 iPad 样式正在覆盖您的 iPhone 样式。尝试像这样切换它们：

/* ipad  - PINK */
@media only screen and (max-device-width : 1024px) {
    body {background-color:#ff8888;} 
}

/* iphone - GREEN */
@media only screen and (max-device-width : 480px) {
    body {background-color:#009900;}
}

iPhone 的视口有多宽？480像素？

在您的代码中，您首先检查设备宽度是否<=480。这将返回 true，因此应用了封闭的样式。然后，您的代码检查设备宽度是否 <=1024。480 确实小于 1024，所以应用了封闭的样式。

于 2012-07-17T22:15:42.717 回答
6

最好不要单独使用该max-device-width属性。将它与其他属性一起使用，例如min-device-width准确定位设备。

有时会令人困惑，但为了更好地理解，W3C 指定的基本属性是device-width设备屏幕的宽度（不是浏览器宽度）

min和max是表示“大于或等于”和“小于或等于”约束的前缀。此语法用于避免可能与 HTML 和 XML 冲突的“<”和“>”字符。

换句话说，device-width查询并将设备宽度作为一个数字返回，但使用 min 和 max 不会返回表示设备最小和最大宽度的两个固定数字，而是允许您检查是否device-width小于或大于您选择的值。

因此，在您的情况下，这两组都将适用于 iPhone，因为订单意味着 iPhone 设备宽度将始终小于 1024 和 480。

尽管切换集合的顺序可以作为@JezenThomas 的解决方案，但我建议您尝试这些 Hardboiled CSS 媒体查询：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
于 2012-07-17T22:11:39.357 回答
1

您可以尝试以下方法：

@media only screen and (min-device-width:481px) and (max-device-width : 1024px) {
        body {background-color:#ff8888;
}
于 2012-07-17T23:17:52.287 回答