web-dev-qa-db-ja.com

モバイルWebでピンチズームを無効にする

モバイルデバイスでピンチとズームを無効にします。

ビューポートにどの構成を追加する必要がありますか？

リンク： http://play.mink7.com/n/dawn/

htmlcssmobile-websiteviewport
66
Harsha M V

EDIT：これはコメントされ続けているため、これを行うべきではないことは誰もが知っています。質問は方法私がやるのではなく、はずやるのではありませんでした。

これをモバイルデバイスに追加します。次に、幅をパーセンテージで指定すると、問題ありません。

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

これもビューポートを使用できないデバイスに追加します。

<meta name="HandheldFriendly" content="true" />
143
SpaceBeers

これが私が必要とするすべてです：

<meta name="viewport" content="user-scalable=no"/>
12
quemeful

これは悪い考えだと言ったすべての人に、私はそれが常に悪いものではないと言いたいです。すべてのコンテンツを表示するためにズームアウトする必要があるのは非常に退屈な場合があります。たとえば、iOSで入力を入力すると、ズームして画面の中央に表示されます。キーボードを閉じても作業が行われないため、ズームアウトする必要があります。また、素晴らしいレイアウトとユーザーエクスペリエンスを作成するために何時間も費やすと、ズームによって混乱することを望まないことに同意します。

しかし、ビジョンの問題を抱える人々にとっても、他の議論は価値があります。しかし、私の意見では、目に問題がある場合は、システムのズーム機能をすでに使用しているため、コンテンツを乱す必要はありません。

9
Thibaut Rey

残念ながら、Appleはuser-scalable=noを無視することを決定したため、提供されたソリューションはSafari 10以降では機能しません。このスレッドには詳細とJSハッキングがあります： ビューポートズームiOS 10以降のサファリを無効にしますか？

6
s-f

IEには独自の方法があります。CSSプロパティ、-ms-content-zoomingです。ボディ上で何も設定しないか、何かを無効にする必要があります。

IE10でのピンチを無効にする

http://msdn.Microsoft.com/en-us/library/ie/hh771891（v = vs.85）.aspx

4
nafg

これにより、iOSサファリでのユーザーによるズームアクションが防止され、「タブにズーム」機能も防止されます。

document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
}

document.addEventListener('gesturechange', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
}

document.addEventListener('gestureend', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
}

jsfiddle： https://jsfiddle.net/vo0aqj4y/11/

4
trias

見つかった ここuser-scalable=noを使用できます：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
2
some one

Min-widthプロパティで試してください。説明させてください。画面幅が400pxのデバイスを想定します（インスタンスの場合）。ズームインすると、フォントはますます大きくなります。ただし、ボックスとdivは同じ幅のままです。 min-widthを使用すると、divとboxを減らすことを避けることができます。

0
Ajay Sharma