Question

我有一个嵌入式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>

Answer 1

C中的CSS代表“级联”。您的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，因此应用了封闭的样式。

Answer 2

最好不要单独使用max-device-width属性。与min-device-width等其他属性一起使用可准确定位设备。

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

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

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

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

虽然切换你的套装顺序可以作为@JezenThomas的解决方案，但我建议你试试这些Hardboiled CSS媒体查询：

device-width

Answer 3

你可以尝试这些方法：

@media only screen and (min-device-width:481px) and (max-device-width : 1024px) {
        body {background-color:#ff8888;
}

我如何在iPad和iPhone之间区分不同的风格

3 个答案: