android - 手持 iPhone Android 特定 CSS 根本不起作用

Question

我正在尝试为手持设备创建特定的 CSS，但我觉得我已经尝试了所有可能的方法，但没有任何效果。

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

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

我希望手持式 ul 隐藏在桌面上，屏幕 ul 隐藏在手持式设备上，这些手持设备应该使用 display: none 工作。

为了使设备特定的 CSS 正常工作，我尝试在 HTML header 中使用单独的 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 handheld”)。

看起来是个麻烦的地方。也许依赖 JavaScript 来选择样式会更好？ (并自动执行创建该 JavaScript 的过程。)