4

所以大多数时候我的样式表都能正常显示。标准/原始版本总是完美无缺，但有时从移动设备查看时似乎会忽略移动版本

我将它们指定如下：

<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 799px)" />

我正在使用 Droid X 以纵向模式查看页面，因此设备宽度不应超过上面指定的最大宽度，但有时，它仍会随机恢复到原始 css 页面。

有什么办法让它不这样做吗？

4

4 回答 4

2

确保您的standard.css 不会影响您期望在mobile.css 中看到的级联。看起来移动设备会先加载您的standard.css，然后再加载mobile.css - 因此两个样式表中的样式都会影响显示。我通常将样式表链接元素包装在仅向移动设备显示移动样式表的逻辑中，而不是同时显示两个样式表。

此外，不要忘记包含此元标记以确保您的页面正确缩放到设备尺寸：

<meta name="viewport" content="width=device-width" />
于 2011-02-26T19:20:20.037 回答
0

我以前见过这种情况。我相信是身体元素的大小发生了变化。正确的文档类型很重要。它应该是：

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
于 2011-02-25T16:37:34.893 回答
0

尝试使用“手持”媒体类型。

<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
于 2011-02-25T18:13:12.183 回答
-1

也许使用 media="screen" 作为standard.css？也许它有帮助（：

或者检查服务器端的用户代理。如果是移动设备，则只加载移动 css，否则加载standard.css。

我使用 WURFL 来确定它是否是移动设备...

于 2011-02-23T21:18:01.320 回答