Question

我正在尝试为手持设备创建特定的CSS，我觉得我已经尝试过所有可能的方式而没有效果。

我需要这样做的原因是手持设备不使用fancybox而是在新标签页中打开链接。

要在div中执行此操作，有2个UL，每个都有一个类（屏幕和手持设备）。

我希望将手持设备ul隐藏在桌面上，并将屏幕ul隐藏在手持设备上，这些设备应使用display：none进行操作。

要让设备特定的CSS工作，我尝试在HTML标题中使用单独的css文件，例如：

<link rel="stylesheet" type="text/css" media="screen" href="css/master.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="css/handheld.css" />

或在master.css文件中：

    @media only screen and (max-device-width: 640px) {
    .screen { display: none !important; }
    }

但这不起作用。 Android似乎总是使用包含fancybox类的UL，因此每次都会加载fancybox。

我在多个Android浏览器（Opera，stock和Dolphin）中尝试过它。

Answer 1

我已经使用此页面进行了测试：

http://htmldog.com/test/handheld.html

在我的android（不幸的是2.1）它在默认浏览器中不起作用。在Opera Mobile中它适用于我。（当然，我正在使用最新版本。）

更新：对不起，它似乎仅适用于Opera Mini，而不适用于Opera Mobile。（我之前是否真的点击了错误的浏览器？）

并且http://caniuse.com/#search=@media表示Opera Mobile和Mini支持@media（但目前没有说“@media掌上电脑”）。

它看起来像一个麻烦的地方。也许最好依靠JavaScript来选择样式？（并自动创建JavaScript的过程。）

掌上电脑Android Android特定CSS根本不起作用

1 个答案: