web-dev-qa-db-ja.com

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

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

javascriptcsshtml5iphone-web-app
72
Stijn Martens

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

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

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での選択後にズーム解除

90
Sasi Dhar

user-scalable = noはあなたが必要とするものです。ちょうどこの質問には実際に決定的な答えがあります

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

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

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

推奨 ここ by Christina Arasmo Beymer

33
Triptoph

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

ズーム機能を無効にするという回答は、一部の目の見えるユーザーが小さな携帯電話でズームしたい場合には役に立たない。

例：

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

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

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

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

たとえば、テキストが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
}

私はそれが役立つことを願っています！

4
Layor Zee

これを試して：

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関数では、最後に初期状態を復元できます。

IPhone 5Sでテスト済み

2
Dario Brizio

iOSは、font-sizeが16pxより小さい場合、ページをズームしてより大きな入力フィールドを表示します。

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

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

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

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

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

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

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

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

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

幸運を！

0
Vineel Shah

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

-webkit-appearance: none;

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

0
Abdul Sheikh

ここで回答したとおり： 入力「テキスト」タグの自動ズームを無効にする-iPhoneのSafari

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

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

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

0
daxmacrog

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

select {font-size：16px; }

0
nasty