web-dev-qa-db-ja.com

モバイルサイトの入力タグで自動ズーム/フィールドズームを無効にする-すべてのズーム機能を無効にすることなく

私は1日中解決策を探していましたが、このサイトは引き続き表示されますSO.

私は会社のモバイルWebサイトを構築しているので、モバイルデバイスが焦点を合わせたときにテキスト/検索/電子メール入力にズームインするために使用する自動ズームを無効にします。 HTML5でサイトを構築していますが、<meta name="viewport" content="width=device-width, user-scalable=no" /> 解決。さまざまなプロパティ（例：minimum-scale = ＃、maximum-scale =＃ "）これは、テスト対象のほぼすべてのモバイルデバイスで機能します。1つだけ問題があります。余暇にズームイン/ズームアウトします（高解像度の製品ショットがあります。

完全な手動ユーザーズームコントロールを保持しながら、入力タグをクリックしたときにズームインを無効にするにはどうすればよいですか？

p.sサイトもjQueryを使用しています。したがって、それを使用して考えがあれば役立つかもしれません。

ありがとう、Jrak

jqueryhtmlhtml5inputzoom
32
John Rakowski

スタイリングには正確に機能しない場合がありますが、入力要素のフォントサイズを16px以上に設定すると、オンフォーカスズームが停止します。

12
AllanKH

参照： 入力「テキスト」タグの自動ズームを無効にする-iPhoneのSafari

私が見つけることができるきれいな方法はありませんが、ここにハックがあります...

1）ズームの前にmouseoverイベントが発生しますが、mousedownまたはfocusイベントの前にズームが発生することに気付きました。

2）javascriptを使用してMETAビューポートタグを動的に変更できます（ JavaScriptを使用してiPhoneサファリでズームを有効/無効にする ）

だから、これを試してください（コンパクトさのためにjqueryに示されています）：

$("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" />');
}

これは間違いなくハックです...マウスオーバー/ダウンが常にエントリ/出口をキャッチしない場合がありますが、私のテストではうまく機能し、堅調なスタートです。

11
dlo

それを見つけるのにしばらく時間がかかりましたが、ここで私が見つけた最高のコードがあります...... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' +        (event.type == 'blur' ? 10 : 1));
});
6
Stephen Walsh

非常に簡単なハックは、設定することです：

input, textarea {font-size:16px;}
4
Steele Rocky