0

私のウェブサイトには 2 つの異なるスタイルシートがあります。1 つはデスクトップ用、もう 1 つは電話とタブレット用で、すべての:hover機能が無効になっています。ブートストラップ メディア クエリ定義を使用しようとしましたが、一部のハイエンド携帯電話ではデスクトップが表示されます。どうすれば対処できますか?

これは今のところ私の定義です：

<!-- IPHONE 4-->
   <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="/styles-basic.css" />
<!-- IPHONE 5-->
   <link rel="stylesheet" media="screen and (device-aspect-ratio: 40/71)" type="text/css" href="/styles-basic.css" />
<!-- PHONES E TABLETS -->
   <link rel="stylesheet" href="/styles-basic.css" media="screen and (max-width:979px)">
<!-- DESKTOP -->
   <link rel="stylesheet" href="/styles.css" media="screen and (min-width:978px)">
4

1 に答える 1

2

まず、iPhone 4/5 のメディア クエリには、これらのピクセル比を持つ他の多くの電話も含まれます。次に、メディア クエリをサポートしていないブラウザや、ウィンドウが 978 ピクセル未満のブラウザでは、どのスタイルシートが読み込まれるのでしょうか。

この問題の根本 (タッチ デバイスのホバー ルール) を処理する最善の方法は、すべてのブラウザーに 1 つのスタイルシートを提供し、ホバー ルールをModernizrのように機能検出の背後に押し込むことです。Modernizrを入手して、 に含めます<head>。正しく読み込まれたら、:hover css ルールを.no-touchCSS の後ろに押し込みます。これは、タッチ スクリーンを持たないブラウザーにのみ適用されます。

于 2013-06-06T16:12:40.157 に答える