ハンドヘルドiPhone Android固有のCSSがまったく動作しない

Question

ハンドヘルドデバイス用の特定のCSSを作成しようとしていますが、可能な限りあらゆる方法で試してみたようです。

私はこれを行う必要がある理由は、ハンドヘルドデバイスがファンシーボックスを使用せず、代わりに新しいタブでリンクを開くためです。

divでこれを行うには、それぞれがクラス（画面&ハンドヘルド）を持つ2つのULがあります。

ハンドヘルドulをデスクトップ上に隠しておき、画面上にulが表示されているはずのハンドヘルド上に非表示にしたい。

は、次のようなHTMLヘッダに別々のCSSファイルを使用して、私が試した動作するように、デバイス固有の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 and Dolphin）で試してみました。

Answer 1

私は、このページでテストしている：それはデフォルトのブラウザでは動作しません（2.1残念ながら）私のAndroid上で

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

。 Opera Mobileでは、私のために働きます。 （私はもちろん、最新バージョンを使用しています）

アップデート：申し訳ありませんが、Opera Miniでは動作していないようですが、Opera Mobileでは動作しません。 （以前は間違ったブラウザをタップしたのですか？）

そしてhttp://caniuse.com/#search=@mediaは、Opera MobileとMiniが@mediaをサポートしていると言います（しかし、現在は "@media handheld"については何も言及していません）。

厄介な領域のようです。おそらく、スタイルを選択するためにJavaScriptに頼るほうがよいでしょうか？ （そしてそのJavaScriptを作成するプロセスを自動化します）