iPhoneがWebアプリの「選択」にズームインしないようにする

私はこのコードを持っています：

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

iPhoneのフルスクリーンWebアプリで実行します。

このリストから何かを選択すると、iPhoneは-select要素にズームインします。そして、何かを選択した後、ズームアウトしません。

どうすればこれを防ぐことができますか？またはズームアウトしますか？

フォントサイズがしきい値よりも小さいため、ブラウザが領域をズームしようとしていることが原因である可能性があります。これは通常、iPhoneで発生します。

メタタグ属性「user-scalable = no」を指定すると、ユーザーは他の場所でズームできなくなります。問題はselect要素のみにあるため、cssで次を使用してみてください。このハックは元々jquerymobileで使用されています。

HTML：

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

CSS：

select{
font-size: 50px;
}

src：iPhoneで選択した後にズームを解除する

user-scalable = noが必要なので、実際にはこの質問に対する決定的な答えがあります

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

これは、この問題に対処する私の場合にはうまくいくようでした：

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

Christina ArasmoBeymerによってここに提案されました

テキストが16ピクセル未満に設定されている場合、iPhoneはフォームフィールドをわずかにズームします。モバイルフォームフィールドのテキストを16ピクセルに設定してから、デスクトップのサイズを上書きして戻すことをお勧めします。

ズームを無効にするという答えは、視力の弱いユーザーにとっては役に立たないかもしれませんが、それでも小さな携帯電話でズームしたい場合があります。

例：

# Mobile first
input, textarea, select {
  font-size: 16px;
}

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}

私はパーティーに少し遅れていますが、css操作だけでこの問題を解決するかなりきちんとした回避策を見つけました。私の場合、デザイン上の理由でフォントサイズを変更できず、ズームも無効にできませんでした。

テキストが16ピクセル未満に設定されている場合、iPhoneはフォームフィールドをわずかにズームするため、iPhoneをだましてフォントサイズを16ピクセルと見なし、それを自分のサイズに変換することができます。

たとえば、テキストが14pxの場合の例を見てみましょう。16pxよりも小さいため、ズームします。したがって、0.875に従ってスケールを変換できます。

次の例では、それに応じて他のプロパティを変換する方法を示すためにパディングを追加しました。

.no-zoom {
    font-size: 16px;
    transform-origin: top left;
    transform: scale(0.875);            //  14px / 16px
    padding: 4.57px;                    // 4px / 0.875
}

お役に立てば幸いです。

これを試して：

function DisablePinchZoom() 
{
    $('meta[name=viewport]').attr("content", "");
    $('meta[name=viewport]').attr("content", "width=yourwidth, user-scalable=no");
}

function myFunction() 
{
    $('meta[name=viewport]').attr("content", "width=1047, user-scalable=yes");
}


<select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();">
</select>

DisablePinchZoomはonchangeの前に起動されるため、onchangeの起動時にズームが無効になります。onchange機能では、最後に初期状態に戻すことができます。

iPhone5Sでテスト済み

フォントサイズが16px未満の場合、iOSはページをズームして、より大きな入力フィールドを表示します。

いずれかのフィールドをクリックすると、ページがズームされます。クリックすると、16pxになり、デフォルト値に変更されます

以下のスニペットは私には問題なく機能し、モバイルデバイスを対象としています。

@media screen and (max-width: 767px) {
 select:active, input:active,textarea:active{
        font-size: 16px;
 }
}

すべての「選択」フォントサイズを16pxに設定します

select {font-size：16px; }

単独での行動については何もできないと思います。

試すことができることの1つは、ページがまったくズームしないようにすることです。これは、ページが電話用に設計されている場合に適しています。

<meta name="viewport" content="width=device-width" />

もう1つ試すことができるのは、一般的な「select」ステートメントの代わりにJavaScriptコンストラクトを使用することです。メニューを表示する非表示のdivを作成し、javascriptでクリックを処理します。

幸運を！

ここで答えたように：入力「テキスト」タグの自動ズームインを無効にする-iPhoneのSafari

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

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

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

このCSSを追加して、Iosのデフォルトのスタイルを無効にしてみてください。

-webkit-appearance: none;

これは、input [type = search]などの特別なスタイルを取得する他の要素でも機能します。

これについて数時間読んでいて、最良の解決策はここにあるこのjqueryです。これは、iOSSafariの「次のタブ」オプションにも役立ちます。ここにも入力がありますが、自由に削除または追加してください。基本的に、マウスダウンはフォーカスイベントの前に起動し、ブラウザをだまして16pxと考えさせます。さらに、フォーカスアウトは「次のタブ」機能でトリガーされ、プロセスを繰り返します。

$(function(){
    $('input, select').on("mousedown focusout", function(){
        $('input, select').css('font-size','16px');
    });
    $('input, select').on("focus", function(){
        $('input, select').css('font-size','');
    });
})