我正在尝试为手持设备创建特定的 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)中尝试过。
最佳答案
我已经用这个页面测试过:
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 的过程。)
关于android - 手持 iPhone Android 特定 CSS 根本不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8927272/