web-dev-qa-db-ja.com

AndroidでWebページのズーム/スケーリングを無効にする方法

いくつかのデータを収集して中央のデータベースに保存する小さなWebアプリを作成しました。 Androidスマートフォン。値を読んで、それをWebサイトに入力します。これは私だけのためです。

次に、読み取り値を1ずつ増やすボタンを追加し、そのボタンを数回押すことができるようにする必要があります。しかし、速すぎると、ブラウザはダブルタブを認識し、ページを拡大/縮小します。

既にビューポートヘッダーを追加し、Webで見つけることができるすべての値の組み合わせを試しました。しかし、ページはスケーラブルなままです。どうすればそれを止めることができますか？

これは私にとって失敗する最小限のテストページです。

<!doctype html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style type="text/css">
body
{
    font: 16pt sans-serif;
}
</style>
</head>
<body>
This is a test page. It should not be scalable by the user at all. Not with the two-pinger pinch gesture and even less with a double-tap on the text.
</body>
</html>

Initial-scale = 1、maximum-scale = 1、およびあらゆる種類のtarget-whateveritwas-dpiを追加しても、物事は変わりません。ブラウザ（Dolphin HDとストックブラウザ）を再起動し、キャッシュを既にクリアしました。私はAndroid 2.2、電話はHTC Desireです。

androidhtmlscalingviewport
25
ygoe

Android browsers： http://code.google.com/p/Android/issues/detail?id=11912 の既知のバグです

12
Hades

これはすべてのAndroidブラウザで私のために働いた：

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

よくある間違いは、次のような2つのメタビューポートタグを使用することです。

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

2番目のメタビューポートタグは、一部のブラウザで最初のメタビュータグをオーバーライドします（たとえば、Androidの場合--chrome）。2番目のメタビューポートタグは、最初の1。

詳細については この回答 をご覧ください

46
Rubinsh

私はそれらのすべてを試しましたが、私のために働きません。そして、私はこれが本当に効果的だと感じました。

     <!-- set viewport to native resolution (Android) - disable zoom !-->
   <meta 
       name="viewport" 
       content="target-densitydpi=device-dpi; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" 
    />

from http://andidittrich.de/index.php/2012/02/disable-zoom-function-of-Android-browser-force-native-resolution/

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

ほとんどの場合、Meta Viewportタグは問題を解決します。ただし、Androidには、向きの変更時にメタタグがリセットされ、ページを再度スケーリングまたはズームできるという奇妙な問題があります。

Androidでこの問題を修正するには、orientaionchangeを監視し、すべてのorientationchangeイベントでメタビューポートタグを設定します。

ここにコードスニペットのリンクがあります http://moduscreate.com/orientation-change-zoom-scale-Android-bug/

1
Ankit Garg