web-dev-qa-db-ja.com

iPhoneがフォームをズームできないようにしますか？

コード：

<select>
    <option value="1">Home</option>
    <option value="2">About</option>
    <option value="3">Services</option>
    <option value="4">Contact</option>
</select>

selectをタッチすると、iPhoneはその要素を拡大します（選択解除後は縮小しません）。

どうすればこれを防ぐことができますか？またはズームアウトしますか？使用できませんuser-scalable=no私は実際にその機能が必要だからです。これはiPhone用で、メニューを選択します。

iphonehtmlcssioshtml-select
44
Atadj

[〜＃〜] update [〜＃〜]：このメソッドはiOS 10では動作しなくなりました。

ビューポートに依存しているため、次の方法で無効にできます。

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

追加 user-scalable=0そして、それはあなたの入力でも動作するはずです。

66
Andrea Turri

これを防ぐには、font-size：16pxをすべての入力フィールドに設定します。

69
Supra

IOSの場合、OSが十分と見なす（> = 16px）フォントサイズを単純に割り当てることにより、入力要素のズームを回避できます。したがって、ズームの必要性を回避できます。

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

また、さまざまなフレームワークで利用されるソリューションであり、メタタグの使用を回避できます。

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

IOS10.0.1で動作しなくなった

font-size:16px作品

3
atorgfr

Font-sizeを設定するための最も賛成の回答は私には機能しません。 javascriptによるクライアントの識別 をここの回答のメタタグと組み合わせて使用​​すると、入力フォーカスでのiPhoneのズーム動作を防ぐことができます。

$(document).ready(function ()
{
    if (/iPhone/.test(navigator.userAgent) && !window.MSStream)
    {
        $(document).on("focus", "input, textarea, select", function()
        {
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">');
        });

        $(document).on("blur", "input, textarea, select", function()
        {
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
        });
    }
});

Blurイベントのメタタグを新しい値に置き換える必要があるようです。削除するだけでは、更新された動作がトリガーされないようです。

UIはまだズームを初期化していますが、すぐに再びズームアウトします。これは許容範囲内であり、iPhoneユーザーは、ブラウザが適用可能なシナリオで何らかの動的なズームを行っていることに既に慣れている必要があります。

3
Alex

これは以下を調べると役立つ場合があります。

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

基本的に、フォーム要素をタップするイベントをキャプチャし、ズームインのデフォルトのiOSアクションを実行せずに、ページの残りの部分をズームできるようにする必要があります。

編集：

リンクには、

2）JavaScriptを使用してMETAビューポートタグを動的に変更できます（Javascriptを使用したiPhoneサファリでのズームの有効化/無効化を参照してください）。

詳しく説明するには：

  1. ビューポートメタタグはズームを許可するように設定されています
  2. ユーザーはフォーム要素をタップし、メタタグを変更してズームを無効にします
  3. 完了を押すと、ビューポートがズームできるように変更されます

フォーム要素をクリックしたときにタグを変更できない場合は、フォーム要素を模倣するdivを配置します。これを押すと、タグが変更され、入力が呼び出されます。

3
Charlie

フォントサイズの設定は、入力要素に対しては完全に機能しますが、選択要素に対しては機能しません。選択タグの場合、ユーザーがselect要素との対話を開始するときにビューポートズームをアクティブに無効にし、終了時に再び有効にする必要があります。

//the mousedown event seems to be the one that does the trick, versus 'focus', because focus fires after the zoom already happens.
$('select').mousedown(function(){
  $('meta[name=viewport]').remove();
  $('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');
})

$('select').focusout(function(){
  $('meta[name=viewport]').remove();
  $('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
})
2
gregkerzhner

Bootstrapを使用している場合、簡単な修正が見つかりました。

W3sで説明したように、要素に。form-group-lgを追加することで、水平フォーム内のラベルとフォームコントロールをすばやくサイズ変更できます。

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="control-label">Large Label</label>
    <div>
      <input class="form-control" type="text">
    </div>
  </div>

このページの2番目の例を参照してください： http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp

Safariでテストし、iPhone SEでChromeを使用してみてください。

0
Hugo Lauzon

だからここに私にとってうまくいく最終的な修正があります。

 
 @media画面と（-webkit-min-device-pixel-ratio：0）{
 select、
 textarea、
 input { 
 font-size：16px！important; 
} 
}
0
Adeel Malik

jQueryソリューションは私にとってうまく機能しています。

device_type = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
if(device_type === "touchstart" ){
$('head').append('<style type="text/css">input,  select, textarea {font-size: 16px;}</style>');
}
0
jalalBK

つかいます maximum-scale=1 の代わりに user-scalable=noユーザーのズームピンチ機能を損なうことなく、フォームズームの問題を防止します。

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

0
daxmacrog