web-dev-qa-db-ja.com

iOS 11.3 Safariでピンチズームを防ぐための非ハッキング方法はありますか?

私は本当にピンチを無効にしてウェブページ(iframe)をズームし、別のカスタムインタラクションに指のピンチイベントを使用したいです。したがって、Safariは documentation に従って次の句をサポートしていると述べています。

<meta name="viewport" content="width=device-width, user-scalable=no" />

…実際には、Safariはそれを尊重しません。

ビューポートのズームを防止する機能は、一般にWebでのゲーム体験や、ボタン、入力ボックス、スライドイン/アウトタイプのインターフェイス、ビデオなどのユーザーエクスペリエンスを強化するために重要ですが、低視力の読者にはデフォルトのままです。 iOS Safariには、必要なアクセシビリティ機能を備えたすっきりした読書を提供するreaderモードがあります。

私見では、ウェブのあらゆるユースケースで低視力の読者を対象としたアクセシビリティの原則を適用するのは厳しいです。 passiveイベントリスナーを使用してピンチズームを修正することは可能ですが、衛生上の理由から、質問は次のとおりです。


W3C/WCAGチームとの 最近の議論 で、アクセシビリティガイドラインが指定するのは…(強調鉱山)

2016 arronei/html @ 877b59cから仕様に記載されている適合要件を作成すべきではありません。 は使用を禁止しないが、ユーザーのズーム機能の縮小を真剣に検討することを著者に求めているのは、著者の適合要件のみです。 Appleがサファリで行ったことは、ブラウザの実装者を必要としないため、この問題の範囲を超えています。

IOS Safariの最近の変更により、AppleはアクセシビリティガイドラインをCANNOT author conformance代わりに、彼らだけが知っている理由のための要件。仕様と実装のこの違いを記録のためにここで強調することが重要です。


Apple iOS Safariチームとの議論に続いて、この適合性の問題についてWebkitにバグが報告されました here

14
marvindanig

pinchzoomを防ぐためのハック以外の方法はありませんが、iOS 11.3 Safariでも機能するハックがあります。少なくとも今のところ。 inobounce を参照してください。ラバーバンドの動作とピンチズームの両方を1回のスイープで処理します。

0
marvindanig

From Mobile Safariでビューポートズームを無効にするにはどうすればよいですか

次をヘッドタグに追加してみてください。

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

さらに

<meta name="HandheldFriendly" content="true">

最後に、スタイル属性として、またはcssファイルで、Webkitベースのブラウザー用に次のテキストを追加します。

html {
    -webkit-text-size-adjust: none
}
0
fclinton