1

我正在为 iPhone 构建一个 PhoneGap/Cordova 项目。

我有 2 个 css 文件 - 一个用于一般 CSS 规则，一个用于 iPad 相关 css，如下所示：

    <!--Main Style Sheet-->    
    <link rel="stylesheet" href="css/styles.css" />
    <!-- iPad specific css-->
    <link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="css/ipad.css" type="text/css" />

问题是 iPad css 的行为就像普通 css。当我运行 iPhone 和 iPad 模拟器时，我放在那里的 CSS 会出现。

谁能帮我吗？

谢谢！

4

3 回答 3

1

对于 iPad，您需要min -device-width，而不是 max-device-width（即 iPad 在纵向模式下的最小宽度为 768px）

于 2012-06-14T23:04:30.963 回答
1

max-device-width 给了我们一个最大值而不是最小值，所以它会影响所有低于 768 像素的设备，包括 iphone。给出最小宽度也应该解决它。可能（最小设备宽度：481px）

于 2012-06-14T23:09:45.827 回答
0

如果上述解决方案不能解决某些读者的问题，那么这个问题与响应式网页设计直接相关。

我建议只使用一个带有媒体查询的样式表。

@media screen and (max-width:768px){
    /* Device Specific CSS rules here */
}

我在这里选择了 max-width ，因为上面的任何东西都会呈现正常的 CSS。然后，您可以设置另一个最大宽度约为 500 像素的媒体查询以定位智能手机。请记住，媒体查询会自动继承所有指定的正常 CSS 规则，并且唯一需要在媒体查询内部定义的规则是设备特定样式。

这完全一样；然而，这只需要浏览器解析一个样式表，从而产生更快的加载时间（最小，但更快。

使用媒体查询时，您还需要在 HTML 中包含视口元标记。否则，您的设备将呈现与桌面相同的 CSS。

此外，大多数现代移动浏览器都支持 CSS3 媒体查询。

于 2012-06-15T04:45:29.117 回答