[解決済み] タッチデバイスでブラウザのダブルタップによる「ズーム」オプションを無効にする
2022-05-01 09:24:54
質問
以下のことをしたい。 無効化 その ダブルタップズーム 機能性 指定された要素に をブラウザで表示します(タッチデバイスの場合)。 すべてのズーム機能を無効にすることなく .
例えば、こんな感じです。一つの要素を何度もタップして何かを起こすことができる。デスクトップ用ブラウザでは正常に動作しますが(予想通り)、タッチデバイス用ブラウザでは拡大表示されます。
解決方法は?
回答の下にあるコメントを読まない人がいるので、私の質問にきちんと答えたかっただけです。そこで、ここに書いておきます。
(function($) {
$.fn.nodoubletapzoom = function() {
$(this).bind('touchstart', function preventZoom(e) {
var t2 = e.timeStamp
, t1 = $(this).data('lastTouch') || t2
, dt = t2 - t1
, fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(this).trigger('click').trigger('click');
});
};
})(jQuery);
これは私が書いたのではなく、改造しただけです。iOS専用バージョンはこちらで見つけました。 https://gist.github.com/2047491 (Kablamに感謝)
関連
-
[解決済み] HTMLにおける'"'エンティティの使用法
-
[解決済み] 横型リストアイテム
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] HTML IFステートメント
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?
-
[解決済み】タッチデバイスで:hoverのCSSスタイルを削除/無視する方法
-
[解決済み】JavaScript / HTML5での効果音について
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】パッシブイベントリスナー内部でpreventDefaultができない
-
[解決済み] input type="button "に背景画像を追加するには?
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] クリアフィックスとは何ですか?
-
[解決済み] 複数のノンブレイキングスペース("nbsp")ではなく、タブスペースを使用しますか?
-
[解決済み] Webサイトのブラウザタブアイコン(ファビコン)を追加する方法を教えてください。
-
[解決済み] HTMLのdiv要素とspan要素の違いは何ですか?
-
[解決済み] div内の画像の下に余分なスペースがある