709

<input>のタグが付いた HTML ページを作成しましたtype="text"。iPhoneのSafariでクリックするとページが大きくなります（オートズーム）。これを無効にする方法を知っている人はいますか？

4

37 に答える 37

677

ユーザーのピンチズーム機能を無効にすることなく、ユーザー入力中に Safari がテキストフィールドを自動的にズームインするのを防ぐことができます。maximum-scale=1他の回答で提案されているユーザースケール属性を追加するだけで除外します。

ズームすると「浮く」レイヤーにフォームがあり、重要な UI 要素が画面外に移動する可能性がある場合、これは価値のあるオプションです。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

于 2017-09-16T13:59:58.627 に答える
584

font-size がそれよりも16px小さく、フォーム要素のデフォルトの font-size が11px(少なくとも Chrome と Safari では) である場合、ブラウザーはズームします。

さらに、select要素にはfocus疑似クラスが関連付けられている必要があります。

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

上記のすべてを使用する必要はありません。必要な要素のスタイルを設定できます。たとえばtext、 、number、およびtextarea:

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

入力要素を親スタイルから継承させる代替ソリューション:

body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}
于 2011-06-18T07:17:29.383 に答える
210

Web サイトがモバイル デバイス用に適切に設計されている場合は、スケーリングを許可しないと判断できます。

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

これにより、モバイル ページまたはフォームが「フロート」するという問題が解決されます。

于 2012-12-04T15:21:53.827 に答える
82

要約すると、フォーム要素のフォント サイズを 16px 以上に設定します。

于 2011-10-04T23:56:01.503 に答える
72

この問題を修正する適切な方法は、メタ ビューポートを次のように変更することです。

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

重要: 設定しないでくださいminimum-scale。これにより、ページを手動でズームできるようになります。

于 2015-12-04T09:58:48.717 に答える
40 
input[type='text'],textarea {font-size:1em;}
于 2010-09-23T22:01:30.057 に答える
16

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

1) マウスオーバー イベントはズームの前に発生することに気付きましたが、ズームはマウスダウンまたはフォーカス イベントの前に発生します。

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

これは間違いなくハックです...マウスオーバー/ダウンが常にエントリ/終了をキャッチするとは限らない状況があるかもしれませんが、私のテストではうまく機能し、堅実なスタートです.

于 2011-03-04T16:50:20.600 に答える
14

私は最近 (今日:D)、この動作を統合する必要がありました。コンボを含む元のデザイン フィールドに影響を与えないように、フィールドの焦点に変換を適用することにしました。

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}
于 2012-12-18T13:24:59.983 に答える
14

単純にフォント サイズを 16px に設定する代わりに、次のことができます。

  1. 論理フォント サイズを 16px に設定できるように、意図したサイズよりも大きくなるように入力フィールドのスタイルを設定します。
  2. scale()CSS 変換と負のマージンを使用して、入力フィールドを正しいサイズに縮小します。

たとえば、入力フィールドが最初に次のようにスタイル設定されているとします。

input[type="text"] {
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
    width: 100%;
}

すべての寸法を 16 / 12 = 133.33% 増やしてフィールドを拡大し、次に使用scale()して 12 / 16 = 75% 縮小すると、入力フィールドは正しいビジュアル サイズ (およびフォント サイズ) になり、ズームは行われません。集中。

視覚的なサイズにのみ影響するためscale()、フィールドの論理サイズを縮小するには、負のマージンも追加する必要があります。

この CSS では:

input[type="text"] {
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;

    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}

入力フィールドの論理フォント サイズは 16 ピクセルですが、テキストは 12 ピクセルに見えます。

もう少し詳しく説明したブログ投稿があり、この例を表示可能な HTML として持っています:
No input zoom in iPhone on Safari, the pixel perfect way

于 2018-11-01T17:35:59.540 に答える
13

次のようにビューポート メタにuser-scalable=0を追加します。

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

私のために働いた:)

于 2016-10-11T15:19:53.797 に答える
8

上記の Christina のソリューションを使用しましたが、ブートストラップとデスクトップ コンピューターに適用する別のルールを少し変更しました。Bootstrap のデフォルトの font-size は 14px で、ズームが発生します。以下は、Bootstrap の「フォーム コントロール」を 16px に変更し、ズームを防ぎます。

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .form-control {
    font-size: 16px;
  }
}

モバイル以外のブラウザでは 14px に戻ります。

@media (min-width: 768px) {
  .form-control {
    font-size: 14px;
  }
}

.form-control:focus を使用してみましたが、16px に変更されたフォーカス以外は 14px のままで、iOS8 のズームの問題は修正されませんでした。少なくとも iOS8 を使用している私の iPhone では、iPhone がページをズームしないようにするには、フォーカスの前に font-size を 16px にする必要があります。

于 2014-09-26T23:04:03.047 に答える
8

これは私のために働いた：

input, textarea {
    font-size: initial;
}
于 2014-09-02T01:00:00.960 に答える
8

iOS 7 で動作する Javascript ハック。これは @dlo の回答に基づいていますが、mouseover および mouseout イベントは touchstart および touchend イベントに置き換えられます。基本的に、このスクリプトは、ズームが再度有効になる前に 0.5 秒のタイムアウトを追加して、ズームを防止します。

$("input[type=text], textarea").on({ 'touchstart' : function() {
    zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
    setTimeout(zoomEnable, 500);
}});

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
}
于 2013-11-05T09:21:24.510 に答える
7

jQueryでもこれを行いました：

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

16pxもちろん、このフォント サイズがデザインを壊す場合は、インターフェイスの他の要素を調整する必要があります。

于 2012-12-17T16:31:55.157 に答える
7

のような疑似要素は、以前のよう:focusには機能しません。iOS 11 以降、メイン スタイルの前に簡単なリセット宣言を追加できます (小さいフォント サイズでオーバーライドしない場合)。

/* Prevent zoom */
select, input, textarea {
  font-size: 16px;
}

Tachyons.css などの CSS ライブラリでは、誤ってフォント サイズを上書きしてしまう可能性があることに注意してください。

たとえば、 class:f5は: と同等ですfontSize: 1rem。これは、本文のフォント スケールをデフォルトのままにしておけば問題ありません。

ただし、フォント サイズ クラスを選択した場合:これは、小さなディスプレイを上に向けたf6場合と同等になります。fontSize: .875remその場合、リセット宣言についてより具体的にする必要があります。


  /* Prevent zoom */
  select, input, textarea {
    font-size: 16px!important;
  }

@media screen and (min-width: 30em) {

/* not small */

}
于 2019-03-31T18:58:36.330 に答える
6

しばらく試した後、私はこの解決策を思いつきました

// set font-size to 16px to prevent zoom 
input.addEventListener("mousedown", function (e) {
  e.target.style.fontSize = "16px";
});

// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
  e.target.style.fontSize = "";
});

「マウスダウン」では、入力のフォントサイズを 16px に設定します。これにより、ズームが防止されます。フォーカス イベントでは、font-size を初期値に戻します。

以前に投稿されたソリューションとは異なり、これにより、入力のフォントサイズを好きなように設定できます。

于 2017-01-05T14:34:32.417 に答える
4

2021年ソリューション...

OK、古い回答をすべて読みましたが、どれもうまくいきませんでした。さまざまなことを何時間も試した後、最終的に解決策は簡単に思えました。

input{
    transform: scale(0.875);
    transform-origin: left center;
    margin-right: -14.28%;
}

PC 上の iOS/Android/Chrome でテスト済み

これにより、14px フォントを使用できます。別のサイズが必要な場合、倍率は 14/16 = 0.875 で、負のマージンは (1 - 0.875) / 0.875 * 100 です。

私の入力には「display:flex」に設定された親があり、「flex: 1 1 auto」があるため、親に合わせて大きくなります。これが必要な場合とそうでない場合がありますが、完全を期すために含めています。

于 2021-09-27T22:11:09.760 に答える
2

JavaScript やビューポート機能を使って奇妙なことをしたり、デバイスの手動ズームをすべてオフにしたりしている人を見かけます。私の意見では、それは解決策ではないはずです。この CSS スニペットを追加すると、フォント サイズを 16px などの固定数に変更しなくても、iOS の自動ズームがオフになります。

デフォルトでは、入力フィールドで 93.8% (15px) のフォント サイズを使用し、CSS スニペットを追加することで、これは 93.8% のままです。16pxに変更したり、固定数にする必要はありません。

input[type="text"]:focus,
textarea:focus {
    -webkit-text-size-adjust: 100%;
}
于 2015-04-14T00:39:05.993 に答える
2

フォントサイズ (入力フィールド用) を本文のフォントサイズと同じに設定すると、ブラウザーがズームアウトまたはズームインできなくなりますfont-size: 1rem。より洗練されたソリューションとして使用することをお勧めします。

于 2015-04-26T11:05:54.510 に答える
2

Stephen Walshの回答に基づいて...このコードは、フォーカス時の入力のフォントサイズを変更せずに機能します(これは不自由に見えます) 。ニーズに合わせて「ビューポート幅」を調整します。

// disable autozoom when input is focused
    var $viewportMeta = $('head > meta[name="viewport"]');
    $('input, select, textarea').bind('touchend', function(event) {
        $viewportMeta.attr('content', 'width=640, user-scalable=0');
        setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
    });
于 2014-06-27T15:15:24.843 に答える
2

ちなみに、Bootstrapを使用する場合は、次のバリアントを使用できます。

.form-control {
  font-size: 16px;
}
于 2017-12-01T09:40:02.380 に答える
1

自動ズームイン (ズームアウトなし) は iPhone では依然として煩わしいため、dlo の提案に基づいてフォーカス/ぼかしを操作する JavaScript を次に示します。

テキスト入力が融合されるとすぐにズームが無効になり、入力が離れると再び有効になります。

注:一部のユーザーは、小さなテキスト入力でテキストを編集することを好まない場合があります。したがって、個人的には、編集中に入力のテキスト サイズを変更することを好みます (以下のコードを参照)。

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function onBeforeZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "user-scalable=0";
    }
}
function onAfterZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "width=device-width, user-scalable=1";
    }
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

次のコードは、要素にフォーカスがある間、入力のテキスト サイズを 16 ピクセル (つまり、現在のズーム サイズで計算) に変更します。したがって、iPhone は自動的にズームインしません。

注:ズーム倍率は、window.innerWidth と 320 ピクセルの iPhone のディスプレイに基づいて計算されます。これは、縦向きモードの iPhone でのみ有効です。

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function getSender(evt, local) {
    if (!evt) {
        evt = window.event;
    }
    var sender;
    if (evt.srcElement) {
        sender = evt.srcElement;
    } else {
        sender = local;
    }
    return sender;
}
function onBeforeZoom(evt) {
    var zoom = 320 / window.innerWidth;
    var element = getSender(evt);
    element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
    var element = getSender(evt);
    element.style.fontSize = "";
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>
于 2013-07-14T13:13:37.653 に答える
0

それを見つけるのにしばらく時間がかかりましたが、これが私が見つけた最高のコードです...... 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));
});
于 2014-06-06T15:10:20.970 に答える
-13

それは仕事です!!! 私は私の検索の旅を終えます！

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

iPhone OS6、Android 2.3.3 エミュレータでテスト済み

私は固定幅640pxのモバイルWebサイトを持っていて、オートズームにフォーカスしていました。

私は多くのソリューションを試していましたが、iPhoneとAndroidの両方で機能するものはありませんでした!

ウェブサイトはモバイルファーストのデザインだったので、ズームを無効にしても問題ありません。

これが私が見つけた場所です: クロスブラウザサポートのためにビューポートのサイズ変更とスケーリングを行うには?

于 2014-05-14T09:49:44.723 に答える