3

Modernizr のタッチ テストは、ページが表示されているデバイスがタッチ対応かマルチタッチ対応かをテストする最良の方法の 1 つだと聞いたことがあります。

デバイスにタッチ機能がある場合にのみスタイルシートをロードするために、それ (タッチ テスト) と modernizr のロード機能を使用しようとしています。

ただし、私のコードは機能していないようです。私は何を間違っていますか？

<script type="text/javascript">
Modernizr.load({
    test: Modernizr.touch,
    yep: 'assets/css/touch.css'
});
</script>

更新: 申し訳ありませんが、動作していないということの意味を明確にする必要がありました: マルチタッチ スマートフォンでページにアクセスすると、スタイルが有効になりません。通常のスタイルシートでスタイルを適用すると有効になりますが、それらを touch.css に切り替えて Modernizr で条件付きで読み込もうとすると、機能しません。私の Modernizr のコピーには、yepnope とタッチ テストが含まれています。これらが機能している他のインスタンスで両方を使用しているためです。

4

2 に答える 2

3

スクリプト ブロックは正しいように見えるので、問題は別のものに違いありません。Modernzr ビルドに Yepnope が含まれていることは確かなので、いくつかの推測を以下に示します。

  1. スクリプト ブロックは、Modernzr を含むスクリプト タグの前に来ます
  2. CSSへのパスが間違っています

callback: function(){ alert('loaded!'); }まず、.load() ステートメントにa を追加して、それが発生するかどうかを確認します。そうでない場合は、代わりにデスクトップ ブラウザーに置き換えModernzr.touchてtrueテストし、Javascript エラーが発生しているかどうかを確認します。

于 2013-03-31T22:38:28.673 に答える
2

もう 1 つの解決策は、タッチ対応デバイス用に追加のスタイルシートをロードするのではなく、<body>代わりにクラスを追加することです。

そのようです：

if(Modernizr.touch) {
    $('body').addClass('touch');
}

そして、スタイルシート クラスの前に次のプレフィックスを付けます.touch。

a:hover {
    color: red;
}


a, .touch a:hover {
    color: blue;
}

タッチ デバイスと非タッチ デバイスの CSS に多くの大きな違いがある場合は、追加のスタイルシートを読み込むことをお勧めします。その場合、サイズが非常に大きくなるため、スタイルシートを 1 つだけ使用することはお勧めできません。わずかな違いしかない場合は、body (またはその他の要素) に .touch クラスを追加する方が良い方法だと思います。

于 2013-04-04T07:05:41.867 に答える