web-dev-qa-db-ja.com

Google Maps APIの「meta viewport user-scalable = no」のポイントは何ですか

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

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

私が見たサードパーティの例のほとんどもそれを行います。ただし、それを使用してプラグインを作成し、ユーザーの1人 モバイルデバイスでズームインおよびズームアウトできないことを教えてくれました 。テストするモバイルデバイスがありません。また、検索で役立つ情報は見つかりませんでした。

それで、タグのポイントは何ですか?そのままにしておくべきですか?ブラウザエージェントを検出して、デスクトップブラウザのみに表示する必要がありますか?

プラグインを調べたい場合は、 ダウンロードするソースを参照する 、または 実際の例を参照 にすることができます。

89
Ian Dunn

多くのデバイス(iPhoneなど)では、ユーザーがブラウザーのズームを使用できないようにします。マップがあり、ブラウザがズームを行う場合、ユーザーには巨大なピクセルラベルの付いた大きなピクセルの画像が表示されます。ユーザーは、Googleマップが提供するズームを使用する必要があるという考え方です。プラグインとのやり取りについてはわかりませんが、それが目的です。

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

100
Trott

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

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

更新:もう真実ではありません。<meta name="viewport" content="width=device-width">で300ミリ秒の遅延を削除できます

39
ehfeng

v3ドキュメント (開発者ガイド>概念>モバイルデバイス向けの開発)から:

AndroidおよびiOSデバイスは、次の<meta>タグを尊重します。

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

この設定は、マップをフルスクリーンで表示し、ユーザーがサイズ変更できないようにすることを指定します。 iPhoneのSafariブラウザでは、この<meta>タグをページの<head>要素内に含める必要があることに注意してください。

9
stank345

デザインが反応しない場合は、ビューポートメタタグをまったく使用しないでください。このタグを誤って使用すると、レイアウトが破損する可能性があります。この記事を読んで、何をしているのかわからない限り、このタグを使用するべきではない理由を説明してください。 http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

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

1
Horia Rudan