Web サイトに jquery のマウスオーバー効果があり、タッチ スクリーンを無効にする必要がありますが、JQuery を無効にする画面の幅を知るにはどうすればよいですか? 現時点では、800px未満です。これはiPadの縦向きで機能しますが、横向きにするとJQueryが再びアクティブになります。Ipad の横長の幅は 1024px と読んだことがありますが、これは小さな非タッチ スクリーンのサイズである可能性もあります。画面幅の代わりに特定のデバイスのエフェクトを指定する方法はありますか?
1143 次
1 に答える
2
これを実現するには、別の方法で作業することを検討する必要があります。タッチデバイスのイベントでマウスオーバーを無効にする代わりに、非タッチデバイスのイベントを追加します。
作業中のプロジェクトにModernizrを追加します（おそらくすでにそこにあります）。追加したら、HTML要素にクラスとして追加することで「タッチ」のテストを含めることができます
<html class="touch">
デバイスにタッチ機能がある場合、すべてがそのまま残りますが、デバイスにタッチがない場合、moderizrはそれをからtouchに変換しますno-touch
<html class="no-touch">
次に、次のクラスを持つhtml要素からマウスイベントをバインドできます。.no-touch
この例をコードペンに入れました-http://rwd.is/VyRl37
これは、まだすべてのデバイスのjQueryライブラリをロードしており、タッチデバイスに基づいて関数の上にマウスをロードするかどうかを決定していることを前提としています。jQuery自体を条件付きでロードする場合は、enquire.jsを参照して、指定された幅でjQueryをロードする必要があります。
小さなデバイスで他の関数のjQueryを維持したいが、パフォーマンスを向上させたい場合は、軽量の代替手段としてZepto.jsを使用することを検討できます。
最後に、 Response.jsを使用すると、特定のブレークポイントで関数を呼び出すこともできますが、タッチが有効かどうかがわからないという問題が発生します。
于 2013-02-04T12:36:29.743 に答える