Google Maps APIの「meta viewport user-scalable = no」の意味は何ですか

98

私はGoogle Maps JavaScript API V3を使用しており、公式の例では常にこのメタタグを含めています。

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

私が見たほとんどのサードパーティの例でも同じことができます。けれども私はそれを使ってプラグインを書きました、そして、私のユーザーの1人は彼が彼のモバイルデバイスでズームインしたりズームアウトしたりすることを妨げていると私に言いました。テストに使用するモバイルデバイスがなく、検索で役立つ情報は見つかりませんでした。

では、タグの意味は何ですか？残しておいた方がいいですか？ブラウザエージェントを検出して、デスクトップブラウザでのみ表示する必要がありますか？

あなたがプラグインを調べたい場合は、次のことができ、それをダウンロードし、ソースを閲覧したり、ライブの例を参照してください。

— イアン・ダン
ソース

ところで、Chromeは「キー「ユーザースケーラブル」は認識されず、無視されます」とコンソールに書き込みます。「はい」の値を使用している場合-OOPS、「スケーラブル」に「e」があることに気づきました。まるでそれが「スケール（ドラゴン）:-)を持つことができるかのようです。

— George Birbilis

110

多くのデバイス（iPhoneなど）では、ユーザーがブラウザーのズームを使用できなくなります。地図があり、ブラウザがズームを行っている場合、ユーザーには巨大なピクセル化されたラベルが付いた大きな古いピクセル化された画像が表示されます。アイデアは、ユーザーがGoogleマップによって提供されるズームを使用する必要があるということです。プラグインとの相互作用についてはわかりませんが、それが目的です。

最近では、@ ehfengが彼の回答で指摘しているように、Chrome for Android（およびおそらく他の人）は、そのようなビューポートタグが設定されたページでネイティブブラウザーがズームしないという事実を利用しています。これにより、ブラウザーが待機し、シングルタッチがダブルタッチになるかどうかを確認するために必要なタッチイベントでの恐ろしい300ミリ秒の遅延を取り除くことができます。（「シングルクリック」と「ダブルクリック」を考えてください。）しかし、この質問が最初に尋ねられたとき（2011年）、これはどのモバイルブラウザにも当てはまりませんでした。つい最近、偶然に生まれた素晴らしさが加わっただけです。

— トロット
ソース

私はそれがiphone、ipadでズームを無効にするだけだと思います。サファリのもの。私のAndroidはそれを無視します（もちろん、残りのビューポートタグではなく、ユーザーがスケーラブルな部分です）

— Juan

@Juan iOS / Safariのものだけではありません。たとえば、Chrome for Androidに実装されていると思います。しかし、はい、ビューポートの機能は多くのAndroid 2.Xブラウザーでは機能しません。

— Trott 2013

1

そんなことしないで。一部のWebサイトは、Firefox for Android（および他のWebサイト）では使用できなくなります。ページがすべてのブラウザで正しく表示されるかどうかはわかりません。ズームを削除すると、一部のユーザーがサイトを使用できなくなります。0.3秒ちょっと。Yahoo Techは、ズームできないためAndroid版Firefoxで読めないサイトの例です。

— Josh

user-scalable = noのもう1つの興味深い副作用は、Android 2.Xブラウザーのposition：fixedメニューの問題が修正されることです（ただし、-webkit-backface-visibility：hidden;を使用できます）

— Christian Butzke

46

ユーザースケーラブル（つまり、ダブルタップでズームする機能）を無効にすると、ブラウザーでクリック遅延を減らすことができます。タッチ対応ブラウザーでは、ユーザーがダブルタップでズームすることを期待している場合、ブラウザーは通常300ms待ってからクリックイベントを発生させ、ユーザーがダブルタップするかどうかを確認します。ユーザースケーラブルを無効にすると、Chromeブラウザーはクリックイベントをすぐに発生させ、ユーザーエクスペリエンスを向上させることができます。

Google IO 2013セッションから https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

更新：<meta name="viewport" content="width=device-width">300ミリ秒の遅延を取り除くには十分ではありません

— ehfeng
ソース

一方で、これは障害のあるユーザーのアクセシビリティには適していません。セクション508のガイドラインでは、ユーザーは最大200％までズームインできる必要があると規定されていると思います

— Graham Fowles

9

v3ドキュメントから（開発者ガイド>コンセプト>モバイルデバイス向けの開発）：

AndroidおよびiOSデバイスは、次の<meta>タグを尊重します。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
この設定は、マップをフルスクリーンで表示し、ユーザーがサイズ変更できないようにすることを指定します。iPhoneのSafariブラウザでは、この<meta>タグをページの<head>要素に含める必要があることに注意してください。

— スタンク345
ソース

3

あなたは、ビューポートメタタグを使用してはならないすべてで、あなたのデザインが応答しない場合。このタグを誤用すると、レイアウトが壊れる可能性があります。何をしているのかわからない場合に、このタグを使用するべきではない理由に関するドキュメントについては、この記事を読むことができます。 http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

「user-scalable = no」は、iOS入力ボックスのズームイン効果を防ぐのにも役立ちます。

— ホリア・ルダン
ソース