iPhone 6 plusをiOS 10ベータ版に更新したところ、モバイルサファリでは、メタタグの「user-scalable = no」コードをダブルタッピングまたはピンチ* IGNORE **して、任意のWebページをズームできることがわかりました。 それがバグなのか機能なのかはわかりません。 関数と見なされる場合、ビューポートのズームiOS 10サファリを無効にするにはどうすればよいですか。 ?
----------。 iOS 11/12リリースで更新、iOS 11およびiOS 12サファリはまだ「ユーザースケーラブル=ノー」メタタグを尊重しませんいいえ。
。。
iOS 10のサファリでWebページのスケーリングを防ぐことは可能ですが、それはあなたの側でより多くの作業を伴うでしょう。 議論は、カーゴカルト開発者がすべてのビューポートタグに「user-scalable = no」をドロップし、視覚障害のあるユーザーにとって不必要に困難になるのを止める必要があるということだと思います。
それでも、ダブルタップツーズームを無効にするための簡単な(メタタグ)方法があるように、Appleが実装を変更してほしいと思います。 困難のほとんどはその相互作用に関連しています。
このようなものでピンチツーズームを停止できます。
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, false);
より深いターゲットがイベントのstopPropagationを呼び出すと、イベントはドキュメントに到達せず、スケーリングの動作はこのリスナーによって妨げられないことに注意してください。
ダブルタップツーズームの無効化は似ています。 以前のタップから300ミリ秒以内に発生したドキュメントのタップを無効にします。
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
フォーム要素を正しく設定しないと、入力に焦点を合わせると自動ズームになり、手動ズームがほとんど無効になっているため、ズーム解除することはほとんど不可能になります。 入力フォントサイズが> = 16pxであることを確認します。
これをネイティブアプリのWKWebViewで解決しようとしている場合、上記の解決策は実行可能ですが、これはより良い解決策です:https://stackoverflow.com/a/31943976/661418。 そして、他の回答で述べたように、iOS 10ベータ6では、Appleがメタタグを尊重するフラグを提供しています。
2017年5月の更新:ピンチズームを無効にする古い「タッチスタートのタッチの長さの確認」方法を、より単純な「タッチムーブのイベント.scaleの確認」アプローチに置き換えました。 誰にとっても信頼できるはずです。
この動作は、最新のベータ版で変更されていると思われます。これは、執筆時点ではベータ6です。
iOS 10ベータ6のリリースノートから:
WKWebView
はデフォルトでビューポートのuser-scalable = no
を尊重するようになりました。 「WKWebView」のクライアントは、アクセシビリティを改善し、ユーザーが利用できるようにすることができます。WKWebViewConfiguration
を設定して、すべてのページをピンチツーズームします。 プロパティignoresViewportScaleLimits
からYES
。
ただし、私の(非常に限られた)テストでは、これが事実であることをまだ確認できません。
編集:検証済み、iOS 10ベータ6はデフォルトで「user-scalable = no」を尊重します。
執筆時点でモバイルサファリで機能する回避策は、「addEventListener」の3番目の引数を「{passive:false}」にすることです。そのため、完全な回避策は次のようになります。
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
オプションがサポートされているかどうかを確認するで下位互換性を維持できます。
より堅 ⁇ なJavaScriptオプションを探すために約1時間費やしましたが、見つかりませんでした。 たまたま、ここ数日、hammer.jsをいじっていました(Hammer.jsは、あらゆる種類のタッチイベントを簡単に操作できるライブラリです)。やろう。
その警告と、私がJavaScriptの専門家ではないことを理解して、これは基本的にhammer.jsを活用してピンチズームとダブルタップのイベントをキャプチャし、ログに記録して破棄するソリューションです。
ページにhammer.jsが含まれていることを確認してから、このJavaScriptを頭のどこかに貼り付けてみてください。
<。!-スニペットを開始:js hide:false console:true babel:false -->。
<。!-言語:lang-js -->。 <スクリプトタイプ= "text / javascript" src = "http://hammerjs.github.io/dist/hammer.min.js"> < /script>。 <スクリプトタイプ= "text / javascript">。
// SPORK - block pinch-zoom to force use of tooltip zoom
$(document).ready(function() {
// the element you want to attach to, probably a wrapper for the page
var myElement = document.getElementById('yourwrapperelement');
// create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
var hammertime = new Hammer(myElement, {
prevent_default: false,
touchAction: "pan"
});
// pinch is not enabled by default in hammer
hammertime.get('pinch').set({
enable: true
});
// name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
console.log('captured event:', e.type);
e.preventDefault();
})
});
< / script>。
<。!-終了スニペット-->。
1つのスタイルのルールを挿入し、ズームイベントをインターセプトすることで、必要なものをすべて取得できます。
$(function () {
if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
$(document.head).append(
'<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
)
$(window).on('gesturestart touchmove', function (evt) {
if (evt.originalEvent.scale !== 1) {
evt.originalEvent.preventDefault()
document.body.style.transform = 'scale(1)'
}
})
})
pinchズームを無効にします。
doubleダブルタップズームを無効にします。
⁇ 巻物は影響を受けません。
tapハイライトを無効にします(iOSでは、スタイルルールによってトリガーされます)。
注意:iOS検出を好みに合わせて微調整します。 その詳細ここ。
---。
lukejackson および Piotr Kowalski への謝罪。回答は上記のコードで変更された形式で表示されます。
ピンチツーズームについての以前の答えを試しました。
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
ただし、 event.touches.length>の場合でも、画面はズームします。 1 。 画面上で指が動くのを避けるために、タッチムーブイベントを使用するのが最善の方法であることがわかりました。 コードは次のようになります。
document.documentElement.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
それが役立つことを願っています。
私はかなり素朴な解決策を思いつきましたが、それはうまくいくようです。 私の目標は、偶発的なダブルタップがズームインとして解釈されるのを防ぎ、ピンチを維持してズームがアクセシビリティのために機能することでした。
アイデアは、ダブルタップで最初の「タッチスタート」と2番目の「トゥーシェンド」の間の時間を測定し、遅延が小さすぎる場合は最後の「トゥーシェンド」をクリックとして解釈することです。 偶発的なズームを防止しながら、この方法はリストのスクロールを影響を受けないようにしているようです。 私が何も見逃していないかどうかはわかりません。
let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;
document.addEventListener('touchstart', () => {
preLastTouchStartAt = lastTouchStartAt;
lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
const touchEndAt = +new Date();
if (touchEndAt - preLastTouchStartAt < delay) {
event.preventDefault();
event.target.click();
}
});
ミュートウィンターからのギストとジョセフの答えに触発されました。
私の特定のケースでは、Babylon.jsを使用して3Dシーンを作成しており、ページ全体が1つの全画面キャンバスで構成されています。 3Dエンジンには独自のズーム機能がありますが、iOSではピンチツーズームがそれを妨げます。 問題を克服するために@Josephの回答を更新しました。 無効にするには、オプションとして{passive:false}をイベントリスナーに渡す必要があることがわかりました。 次のコードが機能します。
window.addEventListener(
"touchmove",
function(event) {
if (event.scale !== 1) {
event.preventDefault();
}
},
{ passive: false }
);
ズームへのダブルクリックを防ぐように見えるこの簡単な作業を見つけました:
// Convert touchend events to click events to work around an IOS 10 feature which prevents
// developers from using disabling double click touch zoom (which we don't want).
document.addEventListener('touchend', function (event) {
event.preventDefault();
$(event.target).trigger('click');
}, false);
意図しないズームは、次の場合に発生する傾向があります。
-ユーザーはインターフェイスのコンポーネントをダブルタップします。 -ユーザーは2桁以上(ピンチ)を使用してビューポートと対話します。
_double tap_の動作を防ぐために、2つの非常に単純な回避策を見つけました。
<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>
これらはどちらも、Safari(iOS 10.3.2)がボタンで_ズーム_するのを防ぎます。 ご覧のとおり、1つはJavaScriptのみで、もう1つはCSSのみです。 適切に使用してください。
デモは次のとおりです。https://codepen.io/lukejacksonn/pen/QMELXQ。
私は(まだ)ピンチの動作を防止しようとはしていません。これは主に、Web用のマルチタッチインターフェイスを作成しない傾向があるためです。次に、ネイティブアプリUIを含むすべてのインターフェイスが「ピンチズーム」である必要があるという考えにたどり着きました。 -場所で可能。 私はまだ、ユーザーがこれを行うことを避けて、UIをユーザーがアクセスできるようにすることを絶対に避けます。
iOSのページ(iPhone 6、iOS 10.0.2)で実際に上記のすべての回答を確認しましたが、成功しませんでした。 これが私の作業ソリューションです。
$(window).bind('gesturestart touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
document.body.style.transform = 'scale(1)'
}
});