web-dev-qa-db-ja.com

Androidウェブページの入力フォーカスのズームを無効にします

ここに問題があります。私はWebページ（Androidデバイスのみ）を持っています。そのページには入力ボックス（具体的にはテキストボックス）があり、フォーカスを取得するとブラウザがズームインします。ズームインしたくない-簡単そうですね？

ここからがおもしろいところです。一般的にズームできる必要があるので、言わないでください

<meta name='viewport' content='user-scalable=0'>

私にはうまくいきません。

また、入力ボックスはクリックイベントを受け取りません。別のボタンをクリックすると表示され、プログラムでフォーカスを取得します。

ここに私が試したものがあり、これまでのところ失敗しました：

jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />');
jQuery("#locationLock input").focus();
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />');

これも失敗しました：

<input type='text' onfocus="return false">

この：

jQuery("#locationLock input").focus(function(e){e.preventDefault();});

何か案は？

javascriptjqueryandroidhtml
72
Coomie

ありえない！

皆さんに悪い知らせがあります。 6か月が経ち、誰も質問に正しく答えていません。

また、私はそのプロジェクトと雇用主の仕事を終えました。

私はそれを言うことを恐れていますが、私がまさに求めていたことは不可能です。ごめんなさいしかし、他のオプションを見ることができるように、質問は生きたままにします。

30
Coomie

以下は私のために働いた（Android Galaxy S2）：

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>
33
rebpp

これが最良の方法かどうかはわかりませんが、これはAndroid and iphone。

input:focus { font-size: 16px!important}

メディアクエリを使用して、モバイルデバイスのみをターゲットにできます。

12
Saroj

スケールの問題により入力フォーカスがズームする

さまざまな画面解像度とサイズに合わせてコンテンツのサイズを調整することは非常に困難であり、これが最終的にこのズームの問題の原因です。

ほとんどのモバイルブラウザには、入力フォーカスでトリガーがあります（簡単にオーバーライドできません）。

_if (zoom-level < 1)
   zoom to 1.5
   center focused input relative to screen
_

*はい、それはかなり単純化されていました。

メタタグスケール修正の神話。

_<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">_そのようなすべてのビューポート設定しないズームアウトしている場合、入力フォーカスズームを禁止します。また、これらは、ウィンドウを画面よりも広い幅にプッシュする他のhtml、body、または要素のサイズ変更をオーバーライドしません。

主な原因

デバイスの画面サイズより大きいウィンドウまたはボディサイズを使用します。

Androidスマートフォン：360 x 650のGalaxyラインのほとんどの標準画面サイズを考慮してください。ドキュメントの本文またはウィンドウがそれよりも大きいと定義されている場合明らかにする）、いくつかのことが起こるかもしれません：

  1. ブラウザは、画面の幅に合わせて自動ズームアウトする場合があります。
    1. ユーザーは上記を実行できます。
    2. 上記を実行した可能性があります。
  2. ブラウザは、その後ページにアクセスしたときにズームレベルを復元します。
  3. 現在、コンテンツは最大0.35倍のズームで表示されています。

初期状態1x

ロードされると、ページは収まりません。一部のブラウザはウィンドウに合わせてズームアウトする場合がありますが、ユーザーは最も確実に縮小します。さらに、このページを一度ズームアウトすると、ブラウザはズームレベルを保存します。

0.35倍にズームアウト

ズームアウトすると、幅がうまく収まり、より垂直な領域を持つページが画面に非常にきれいに表示されます...しかし...

ブラウザーは現在、テキストと入力（通常の1倍ズーム用のサイズ）が小さすぎて読み込めない状態になっているため、入力フィールドがフォーカスを取得するとズームのユーザビリティ動作がトリガーされます。

入力フォーカスを1.5倍に拡大

上記の場合の一般的な動作は、入力の可視性を確保するために1.5倍にズームすることです。その結果（ズームアウトしたとき、または大画面で見た目が良くなるようにすべてのスタイルを設定した場合）は、望ましくありません。

解決策1

CSSメディアルール、デバイス検出、または状況に最適なものを組み合わせて使用​​します。ウィンドウとボディを、画面スペースを超えない範囲でいっぱいにするサイズに設定します。

  • これが、多くの人々が入力テキストサイズを16pxに強制することに成功した理由です。
    • 一度それを行うと、ズームアウトしていることは明らかです。
    • また、ブラウザをだまして、少しズームアウトしたウィンドウがフォーカスズームをトリガーしないようにするという利点もあります。

解決策2

メタビューポートを使用しますが、CSSの幅には注意してください。

_<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
_
  • この方法を使用する場合、次のいずれかを実行する必要があります。
    • 幅にはパーセンテージのみを使用します。
    • Emの幅を定義し、emと％のみを幅に使用します。
    • px幅の使用については、ソリューション1をご覧ください。

解決策3

jQuery.mobile $.mobile.zoom.disable();

途中からではなく、最初から開発を開始してください。

12
Tony Chiboucas

はい、可能です

input[type='text'],input[type='number'],textarea {font-size:16px;}

テスト済みAndroid 4.2 browser and Android Chrome。

https://stackoverflow.com/a/6394497/4264

ズームを続けていることがわかったのは、Chrome with Settings-> Accesibility-> Text scaling than 100％。

4
Santiago Corredoira

今日、この問題に突入し、クロムの更新がすぐにパイプに届き、それが解決する可能性があります。 @Joが指摘した chromium の問題により、

no.28 jdd ... @ chromium.org https://codereview.chromium.org/196133011/ の時点で、自動ズームはモバイル向けに最適化されたビューポート（たとえば、「width = device-width」または固定ページスケールビューポートアノテーション）。

要素の可視性を維持するために、そのようなサイトに編集可能な要素をフォーカスする場合、自動スクロールがまだあるかもしれませんが、ズームは無効になります。これはM41で公開されます（ベータチャンネルにアクセスしてからまだ数週間かかります）。

従来のデスクトップサイトの自動ズームを防止する計画はありません。

この時点で、Chromeはv.40、v.41はベータ版です。Android = Chromeブラウザ。

4
cthorpe
font-size: 18px;

これにより、Nexus 7（2011）でAndroid 4.3。

この問題はNexus 7でのみ発生し、次のデバイスはすべてfont-sizeに満足しています：16px：

  • HTC Desire Android 2.3.7
  • Nexus 4 Android 4.3

これが誰かを助けることを願っています！

3
Hung-Su

HTML5 Androidアプリ。私は半分の答えを提供することができます。つまり、テキストの拡大縮小を停止する方法フィールドがフォーカスされています。

Jquery Mobileが必要です：

$('#textfield').textinput({preventFocusZoom:true});

まさにそれをします。

しかし、私が言ったように、これは問題の半分しか解決しません。残りの半分は、ユーザーが後でページを再びズームできるようにします。私が見つけたドキュメントはそれを示唆しているようです

    $('#textfield').textinput({preventFocusZoom:false});

または

$('#textfield').textinput('option','preventFocusZoom',false);

設定を解除する必要がありますが、どちらのオプションも機能させることができませんでした。後でユーザーを別のページに移動する場合は問題ありませんが、私のように、AJAXを介してコンテンツをロードするだけの場合は、使用が制限されます。

編集：IOSを対象としたものの、

$.mobile.zoom.disable();

ズームも停止します。より適切な一般的な方法で。しかし残念ながら

$.mobile.zoom.enable();

以前のコードのように機能を復元できません。

3
user1654926

これは#inputboxは、入力フォーム要素のIDです。

これを使用して、検索ボックスの自動ズームを停止しますIOSこれは上記の以前の投稿のmodです。mouseoverイベントは最初にしか機能しないが、その後のトリガーに失敗するためです。これは本当のヘアプーラーでした...

$("#inputbox").live('touchstart', function(e){
    $('head meta[name=viewport]').remove();
    $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
    }
);

$("#inputbox").mousedown(zoomEnable);

function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}
2
Dotnoise

ちょっとしたメモ：

meta name="viewport"を使用したソリューションは完全に機能します。ただし、ネイティブおよびChromeのブラウザにはAndroidという名前のアクセシビリティ設定があります"ズームを制御するWebサイトのリクエストをオーバーライドします。"設定が設定されている場合、HTML、CSS、またはJavaScriptでズームを無効にすることはできません。

2
Serge

2つのものが必要です

ユーザーがズームできないようにするには、頭の中でこのようなメタタグを使用します。

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

そして、CSSに次のようなものを入れて、ブラウザーがズームしないようにします。

* { font-size:16px; }

できた！ブラウザは、最小のフォントなどに基づいてビューポートのサイズを変更すると思います。たぶん誰かがそれをもっとうまく説明できるかもしれませんが、うまくいきました:)

2
Beto Aveiga

ズームを無効にできるかどうかはわかりませんが、このような制限を設定できます

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

maximum-scale = 0.5およびminimum-scale = 0.5でうまくいくはずです。それは私のために働いた。

1
Razvan Tanase

入力のフォントサイズを16px=に設定すると、ズームが停止します。モバイルブラウザーは16px未満を想定しているので、ユーザーはズームする必要があるので、なぜ自分でやらないのですか。

 input[type='text'],input[type='number'],textarea {font-size:16px;}
 body{ -webkit-text-size-adjust:none;}

以下のメタタグを設定することもできますが、ユーザーのスケーリングは完全に防止されます。

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

ユーザーのスケーリングが必要で、入力スケーリングのみを無効にする場合は、これを試してください

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

これも試してください

1
aWebDeveloper

これは良い答えかもしれません：

input, textarea {
  max-width:100%;
}

<meta name=viewport content='user-scalable=no'>を使用しないでください

1
Guru

作業モデル

これはAndroidで動作します。ここにキーがあります：font-sizeのinputは適切なサイズ。ページの幅が320ピクセルの場合、16ピクセルのフォントサイズが必要です。サイズが640pxの場合、32pxのフォントサイズが必要です。

さらに、次のものが必要です

20ワイドバージョン

<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, minimum-scale=1" />

640ワイドバージョン

<meta name="viewport" content="width=640, initial-scale=.5, maximum-scale=.5, minimum-scale=.5" />

注：これには、ユーザーのスケーリング可能な属性は含まれていません。それはそれを壊すでしょう。

1
Soshmo

非表示の入力フィールドに焦点を合わせようとしているときにズームを停止しようとしている人は、非表示の入力を画面領域（または表示可能領域）と同じ大きさ（または少なくとも同じ幅）にすることができます。

例えば.

HIDDENinput.style.width = window.innerWidth;

HIDDENinput.style.height = window.innerHeight;（オプション）

1
Aaron

これを試してください、それは私のデバイスで動作します：

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

ただし、入力ボックスをダブルクリックすると、キーボードが上にスライドし、ページの高さが低くなります。

0
Shi Chuan

通常、アクセシビリティ機能を無効にしたくないでしょう。

ただし、固定divを追加してその中にWebページを配置するだけで、ズームの問題を回避できます。

#app {
  position: fixed;
  top: 0em;
  bottom: 0em;
  left: 0em;
  right: 0em;
  overflow: scroll;
 }
<body>
<div class="app">
  <!-- the rest of your web page  -->
  <input type="text">
</div>
</body>
<body>
     <div class="app">
     </div>
</body>
0
Zach Radloff

おそらく、ズームスケールを1.0にリセットすることで、ズームを回避できますか？私のAndroid（HTC Wildfire S）で、ズームを1.0にリセットすることができます。

_$('meta[name=viewport]').attr('content',
         'initial-scale=1.0, maximum-scale=0.05');
_

ただし、これによりビューポートが0、0（ページの左上隅）に移動します。 $().scrollLeft(...)と.scrollTop(...)を再度formに戻します。

（_initial-scale=1.0, maximum-scale=0.05_はviewportメタの初期値です。）

（これを行う理由は、Androidズームを防ぐためではなく、他のAndroid破損した_screen.width_およびその他の関連する値。）

0
KajMagnus

このメタタグをHTMLファイルに追加すると、問題が解決します。

<html><head><meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0' ></head><body>html code</body></html>
0
Patel Disha

パーティーに少し遅れましたが、昨日の午後を丸ごと過ごしてこの投稿に行き、Androidの機能/バグであることに気付きました。そこで、ソリューションを投稿します。これは私にとってはうまくいきましたが、それでもユーザーのズームが可能です：

メタ：

<meta id="meta1" name="viewport" content="width=device-width,initial-scale=1,minimal-ui"/>

CSS：

html{
    position:absolute;
    overflow:-moz-scrollbars-vertical;
    overflow-y:scroll;
    overflow-x:hidden;
    margin:0;padding:0;border:0;
    width:100%;
    height:100%;
    }
body{
    position: relative;
    width: 100%;
    height: 100%;
    min-height:100%;
    margin: 0;
    padding: 0;
    border: 0;
}

HTMLをposition:absoluteおよびoverflow-x:hiddenに設定すると、私にとってはうまくいきました。

0
Michel

タッチスタートでビューポートのユーザースケーラブルプロパティを設定すると、タッチスタートでそれを変更して削除し、再度追加する必要がなく、ぼかしで再び有効にする必要がありました。ユーザーはフィールドに焦点を合わせながらズームすることはできませんが、少額の支払いが必要だと思います。

var zoomEnable;

zoomEnable = function() {
  $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=yes");
};

$("input[type='text']").on("touchstart", function(e) {
  $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=no");
});

$("input[type='text']").blur(zoomEnable);
0
listylister

同じ問題が発生しました（Android chrome browser）のみ。このような問題を解決しました。

  1. UserAgentを検出し、テキストフィールドのonFocusおよびonBlurイベントをバインドして、ビューポートメタコンテンツを次のように変更しました

    if ((navigator.userAgent.match(/Android/i)) && (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) {
isAndroidChrome = true;    
}
var viewportmeta = document.querySelector('meta[name="viewport"]');

  2. テキストフィールドのonFocus、次のビューポートメタコンテンツviewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1';を設定します

  3. テキストフィールドのonBlur、ビューポートメタコンテンツをviewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.4';にリセットしています。必要に応じて最大スケールを設定できます。または、ユーザーがスケーラブルにしたい場合は、最大スケールを設定しないでください。

トリガーを変更すると、入力のonFocusイベントがmaximum-scaleが1の場合、ズームインしません。これは私にとって魅力的でした。それがあなたにも役立つことを願っています。

0
Vignesh PT

@soshmoが言ったように、user-scalableはWebKitが好む属性ではないため、これを含めるとWebKitはビューポートタグ全体を破棄します。また、これはmaximum-scaleを1以外に設定した場合にも当てはまり、ズームが停止しませんでした。

すべてのviewportおよびfocusイベントでblurをリセットするとうまくいきました：

var htmlWidth = parseInt($('html').outerWidth());
var screenDPI = parseInt(window.devicePixelRatio);
var screenWidth = parseInt(screen.width);
var screenHeight = parseInt(screen.height);    
var scaleVal = (((screenWidth * screenDPI) / htmlWidth)/screenDPI);
$('input[type="text"], input[type="password"], input[type="email"]').each(function() {

    //unchained for clarity

    $(this).focus(function() { 
        $('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height");
        // Do something to manage scrolling the view (resetting the viewport also resets the scroll)
        $('html, body').scrollTop(($(this).offset().top - (screenHeight/3)));
    });

    $(this).blur(function() { 
        $('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height");
    });
});

viewportの設定/リセットを見つけた場合、WebKitが使用しているコンテンツ属性を受け入れることを確認する価値があります。 user-scalableのようなものを使用するとviewportが破棄されるため、JavaScriptが機能していても変更が影響を受けないことを理解するのに少し時間がかかりました。

0
Bernard Clark

同様の問題に直面して解決したので、回答を投稿します。

私の状態は以下です。

HTMLヘッドのビューポート設定は

<meta name="viewport" content="width=640">

エージェントはAndroid=デフォルトのブラウザです。
Chrome、Firefox、Safariではありません。
Androidバージョンは4.2.x未満です。

私たちの状況の詳細は同じではありませんが、本質的に同じ問題があると思います。

「target-densitydpi = device-dpi」をmeta [name = viewport]タグに追加することで解決しました。

<meta name="viewport" content="width=640, target-densitydpi=device-dpi">

やってみてください。

しかし、「target-densitydpi = device-dpi」には副作用があると言わざるを得ません。

悪い例はこちらです。

  1. Android OLDブラウザは「target-densitydpi = device-dpi」と読み取ります。
  2. Target-densitydpiプロパティを持たない別のページに移動します。
  3. ブラウザは、ページを「target-densitydpi = device-dpi」としてレンダリングし始めます。
  4. そのため、次のページが間違ったスケール係数でレンダリングされます。

この場合の解決策は、次のページに進む前に、javascriptを使用してtarget-densitydpiプロパティを「device-dpi」から「medium-dpi」に書き換えることです。

JQueryを使用した例。

<a href="go-to-the-other" class="resetDensityDpi">Other page</a>
<script>
$(function(){
    $('.resetDensityDpi').click(function(){
        var $meta = $('meta[name="viewport"]');
        $meta.attr('content', $meta.attr('content').replace(/target-densitydpi=device-dpi/, 'target-densitydpi=medium-dpi'));
        return true;
    });
});
</script>

そして...このコードは新しい問題を引き起こします。
一部のブラウザは、戻るボタンを使用して前のページに戻るときに、キャッシュデータを使用してJavaScriptプロセスの結果をレンダリングします。そのため、前のページは「target-densitydpi = device-dpi」ではなく「target-densitydpi = medium-dpi」として表示されます。

これの解決策は、上記の反対です。

<script>
$(function(){
    var rollbackDensityDpi = function() {
        // disable back-forword-cache (bfcache)
        window.onunload = function(){};

        var $meta = $('meta[name="viewport"]');
        if ($meta.attr('content').match(/target-densitydpi=medium-dpi/)) {
            $meta.attr('content', $meta.attr('content').replace(/target-densitydpi=medium-dpi/, 'target-densitydpi=device-dpi'));
        }
    };

    if (window.addEventListener) {
        window.addEventListener("load", rollbackDensityDpi, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", rollbackDensityDpi);
    } else {
        window.onload = rollbackDensityDpi;
    }
});
</script>

ありがとうございました。

0
Murai Satoshi

偶然、私はこれを発見しました：

 input {
     line-height:40px;
 }

Chrome for Androidバージョン18ですが、それは私の場合に固有かもしれませんが、

<meta name='viewport' data='width=800'>

将来の参照のために、Google経由でここに来る場合、これは他のソリューションの1つである可能性があります。

0
aep

Nexus 7では、メディアクエリが-

@media screen and (max-device-width: 600px) and (orientation : portrait)

そこで、以下のメディアクエリを使用して問題を解決しました-

@media screen and (max-device-width: 600px) and (max-aspect-ratio: 13/9)

0
sam

コンテンツはウィンドウよりも狭くしてください。

これを念頭に置いてページを最初から設計する必要がありますが、完全に効果的です。

キーは @media css at-rule は、画面が収まるのに十分な大きさであることがわかっている幅のみをコンポーネントに許可します。

たとえば、より大きなモニターでテキストが広がりすぎないようにコンテンツの幅を設定している場合、幅が大きな画面にのみ適用されるようにしてください。

@media (min-width: 960px){
.content{
  width : 960px;
}
}

または、幅が500ピクセルの画像がある場合は、小さな画面で非表示にする必要があるかもしれません。

@media (max-width: 500px){
.image{
  display : none; 
}
}
0
martin

Galaxy 4で働いた：
コードをHTMLヘッダーインデックスファイルに追加します。

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>
0
shay golan