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

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

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;
}

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

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

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

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

New：フォーカスなしで入力で16pxを使用しない限り、IOSは引き続きズームします。

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

IOSが選択に背景を追加しないため、背景を追加しました。

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

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

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

要約すると、答えは次のとおりです。フォーム要素のフォントサイズを少なくとも16pxに設定します

input[type='text'],textarea {font-size:1em;}

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

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

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

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

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

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

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

私のために働いた:)

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

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}

他の多くの回答がすでに指摘しているように、これmaximum-scaleはメタタグに追加することで実現できますviewport。ただし、これにより、Androidデバイスでユーザーズームが無効になるというマイナスの影響があります。（v10以降、iOSデバイスのユーザーズームは無効になりません。）

デバイスがiOSの場合、JavaScriptを使用maximum-scaleしてメタviewportに動的に追加できます。これは、両方の長所を実現：私たちは、ユーザーがズームすることが可能とフォーカスのテキストフィールドにズームからiOSのを防ぎます。

| maximum-scale             | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes                       | yes           | yes                     | no                |
| no                        | yes           | no                      | yes               |
| yes on iOS, no on Android | yes           | yes                     | yes               |

コード：

const addMaximumScaleToMetaViewport = () => {
  const el = document.querySelector('meta[name=viewport]');

  if (el !== null) {
    let content = el.getAttribute('content');
    let re = /maximum\-scale=[0-9\.]+/g;

    if (re.test(content)) {
        content = content.replace(re, 'maximum-scale=1.0');
    } else {
        content = [content, 'maximum-scale=1.0'].join(', ')
    }

    el.setAttribute('content', content);
  }
};

const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;

// /programming/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
  /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (checkIsIOS()) {
  disableIosTextFieldZoom();
}

iOS 7で動作するJavascriptハック。これは@dloの回答に基づいていますが、マウスオーバーイベントとマウスアウトイベントは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" />');
} 

これは私のために働きました：

input, textarea {
    font-size: initial;
}

私は上記のクリスティーナのソリューションを使用しましたが、ブートストラップの小さな変更と、デスクトップコンピューターに適用する別のルールを使用しました。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にする必要があります。

私もこれを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フォントサイズがデザインを壊す場合、インターフェースの他のいくつかの要素を適応させる必要があるかもしれません。

しばらくすると、この解決策が思いつきました

// 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に設定します。これはズームを防ぎます。フォーカスイベントでは、フォントサイズを初期値に戻します。

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

ここでほぼすべての行を読んでさまざまなソリューションをテストした後、これは、ソリューションを共有してくれたすべての人のおかげで、私が思いついた、テストし、iPhone 7 iOS 10.xで動作したものです。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: initial;}
}
@media (min-width: 768px) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: inherit;}
}

しかし、いくつかの短所があります。「ホバー」状態と「フォーカス」状態の間で発生するフォントサイズの迅速な変化と、再描画によるパフォーマンスへの影響により、「ジャンプ」が顕著になります。

@jirikuchtaの回答に触発されて、私はこの問題を次のCSSを追加することで解決しました。

#myTextArea:active {
  font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}

JSはありません。フラッシュなどは何もありません。

注目にそれの価値ことviewportでmaximum-scale=1も動作しますが、ページはインラインフレームとしてロードされていないとき、またはあなたには、いくつかの他のスクリプトの変更がある場合viewportなど

のような疑似要素: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 */

}

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

.form-control {
  font-size: 16px;
}

私はオランダの大学のWebサイト（フォームコントロールで15pxを使用）のフォームコントロールの問題への自動ズームを「修正」する必要がありました。私は次の一連の要件を思い付きました：

• ユーザーは引き続きズームインできる必要があります
• font-sizeは同じままにする必要があります
• 一時的な異なるスタイルの点滅はありません
• jQuery要件なし
• 最新のiOSで動作する必要があり、他のOS /デバイスの組み合わせを妨げない
• 可能であれば魔法のタイムアウトはなく、必要に応じてタイマーを正しくクリアする

これは私がこれまでに思いついたものです：

/*
NOTE: This code overrides the viewport settings, an improvement would be
      to take the original value and only add or change the user-scalable value
*/

// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
  preventZoomOnFocus();


function preventZoomOnFocus()
{
  document.documentElement.addEventListener("touchstart", onTouchStart);
  document.documentElement.addEventListener("focusin", onFocusIn);
}


let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];


function onTouchStart(evt)
{
  let tn = evt.target.tagName;

  // No need to do anything if the initial target isn't a known element
  // which will cause a zoom upon receiving focus
  if (    tn != "SELECT"
      &&  tn != "TEXTAREA"
      && (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
     )
    return;

  // disable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}

// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
  // reenable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}

// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
  let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
  if (vpnode)
    vpnode.setAttribute("content",newvalue);
  else
  {
    vpnode = document.createElement("meta");
    vpnode.setAttribute("name", "viewport");
    vpnode.setAttribute("content", newvalue);
  }
}

いくつかのメモ：

• これまでのところ、iOS 11.3.1でのみテストしましたが、他のいくつかのバージョンでもすぐにテストすることに注意してください
• focusInイベントの使用は、少なくともiOS 5.1が必要であることを意味します（ただし、私たちが構築したサイトは、9として古いiOSバージョンで動作しているのはとにかくクールなボーナスだと思います）
• 私が取り組んでいる多くのサイトには、フォームコントロールを動的に作成するページがあるため、イベント委任を使用します。
• bodyが利用可能になるのを待つ必要がないように、eventListenersをhtml要素（documentElement）に設定します（ドキュメントが準備完了/ロード済み状態かどうか、またはDOMContentLoadedイベントを待つ必要があるかどうかを確認する必要はありません）。

フォントサイズを単に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％だけ増やしてフィールドを拡大し、次に12/16 scale()= 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%;
}

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

ブログの投稿でもう少し詳しく説明します。この例は表示可能なHTMLです
。iPhoneのSafariでは入力ズームなし、ピクセルに最適な方法

これらの答えがあっても、何が起こっているのかを理解するのに3日かかりました。将来、もう一度解決策が必要になるかもしれません。

私の状況は、説明した状況とは少し異なりました。

私の場合、ページのdivにコンテンツ編集可能なテキストがありました。ユーザーがDIFFERENT div（並べ替えのボタン）をクリックすると、contenteditable div（以前に保存およびクリアされた選択範囲）のテキストが自動的に選択され、その選択に対してリッチテキストexecCommandが実行され、再度クリアされました。

これにより、ページの他の場所にあるカラーdivとのユーザーインタラクションに基づいてテキストの色を目に見えないように変更しながら、適切なコンテキストで色を表示できるように選択を通常は非表示にできます。

さて、iPadのSafariでは、カラーdivをクリックすると画面上のキーボードが表示され、私が何をしてもそれを妨げることはありませんでした。

私はついにiPadがこれをどのように行っているかを理解しました。

編集可能なテキストの選択をトリガーするタッチスタートとタッチエンドシーケンスをリッスンします。

その組み合わせが発生すると、画面キーボードが表示されます。

実際には、編集可能なテキストを拡大しているときに、基になるページを拡大するドリーズームを実行します。私が見ているものを理解するだけで一日かかりました。

したがって、私が使用した解決策は、これらの特定のカラーdivでタッチスタートとタッチエンドの両方をインターセプトすることでした。どちらのハンドラでも、伝播とバブリングを停止し、falseを返します。しかし、タッチエンドイベントでは、クリックがトリガーしたのと同じ動作をトリガーします。

そのため、以前は、Safariは「タッチスタート」、「マウスダウン」、「タッチエンド」、「マウスアップ」、「クリック」、そして私のコードのために、テキストの選択をこの順序でトリガーしていました。

インターセプトのための新しいシーケンスは、単にテキストの選択です。Safariが処理してキーボードの処理を行う前に、他のすべてが傍受されます。touchstartとtouchendのインターセプトは、マウスイベントのトリガーも防ぎます。コンテキストでは、これで問題ありません。

これを説明する簡単な方法はわかりませんが、問題が発生してから1時間以内にこのスレッドが見つかったので、ここにあることが重要だと思います。

98％は、同じ修正が入力ボックスやその他のものでも機能すると確信しています。Safariがシーケンスをキーボードトリガーとして認識しないようにするために、タッチイベントをインターセプトして、それらを伝播またはバブルせずに個別に処理し、小さなタイムアウト後に選択を行うことを検討してください。

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

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

input[type="text"]:focus,
textarea:focus {
    -webkit-text-size-adjust: 100%;
}

ボディのfont-sizeと等しい（入力フィールドの）font-sizeを設定すると、ブラウザがズームアウトまたはズームインできなくなるようfont-size: 1remです。よりエレガントなソリューションとして使用することをお勧めします。

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>

それを見つけるのにしばらく時間がかかりましたが、ここに私が見つけた最高のコードがあります...... 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));
});

スティーブンウォルシュの回答に基づいて...このコードは、フォーカスの入力のフォントサイズを変更せずに動作します（これは不自然に見えます）。さらに、FastClickでも動作します。すべてのモバイルサイトに追加して、「きびきび」させるのに役立ちます。「ビューポートの幅」をニーズに合わせて調整します。

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

font-sizeを16pxに設定することについての上位の回答に対するコメントは、それがどのように解決策であるか、より大きな/より小さなフォントが必要な場合はどうなるのかを尋ねました。

私はあなたのことはすべて知りませんが、フォントサイズにpxを使用するのは最善の方法ではありません。emを使用する必要があります。

テキストフィールドが16ピクセルを超えるレスポンシブサイトでこの問題に遭遇しました。フォームコンテナーを2remに、入力フィールドを1.4emに設定しました。私のモバイルクエリでは、ビューポートに応じてHTMLフォントサイズを変更します。デフォルトのhtmlは10なので、私の入力フィールドはデスクトップで28pxに計算されます

自動ズームを削除するには、入力を1.6emに変更する必要がありました。これによりフォントサイズが32pxに増加しました。わずかに高く、ほとんど目立ちません。iPhone 4＆5では、htmlフォントサイズを縦向きに15pxに、横向きに10pxに戻します。そのピクセルサイズのスイートスポットは48pxであるように見えたため、1.4em（42px）から1.6em（48px）に変更しました。

あなたがしなければならないことは、font-sizeのスイートスポットを見つけ、それをrem / emサイズに逆変換することです。

これが私のプロジェクトの1つで使用したハックです。

select {
    font-size: 2.6rem; // 1rem = 10px
    ...
    transform-origin: ... ...;
    transform: scale(0.5) ...;
}

最終的には、私が欲しかった初期のスタイルとスケールになりましたが、フォーカスを拡大できませんでした。