96

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

<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ます。そして、何かを選択した後、ズームアウトしません。

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

4

12 に答える 12

114

フォントサイズがしきい値よりも小さいため、ブラウザが領域をズームしようとしていることが原因である可能性があります。これは通常、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で選択した後にズームを解除します

于 2012-11-20T07:31:44.880 に答える
54

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

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
于 2011-06-28T22:38:45.307 に答える
35

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

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

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

于 2013-06-04T00:20:33.410 に答える
34

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

ズームを無効にするという答えは、アクセシビリティには役立ちません/部分的に視力のあるユーザーは、小型の携帯電話でズームしたい場合があります。

例：

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

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}
于 2015-10-01T10:03:10.487 に答える
6

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

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

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

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

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

お役に立てば幸いです。

于 2018-04-10T13:00:31.840 に答える
5

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

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

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

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

于 2019-02-08T10:01:18.750 に答える
2

これを試して：

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でテスト済み

于 2014-06-09T14:51:39.910 に答える
1

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

select {font-size：16px; }

于 2019-08-20T22:02:00.063 に答える
0

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

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

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

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

幸運を！

于 2011-06-26T11:01:03.267 に答える
0

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

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

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

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

于 2018-09-28T13:15:55.830 に答える
0

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

-webkit-appearance: none;

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

于 2019-01-01T19:51:46.363 に答える
0

これについて数時間読んでいて、最良の解決策はここにあるこの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','');
    });
})
于 2019-04-11T00:09:26.867 に答える