iOS版Safariでフォーム入力時に自動ズームしてしまう

iOS版Safariで入力フォームにフォーカスすると、勝手にズームすることがあります。

予告なくズームされるため、ユーザビリティを考慮すると、好ましくありません。

この現象に対する対策はいくつかあるため、ご紹介いたします。

font-sizeを大きく設定する

iOS版Safariでは入力フォームの文字サイズが16px以下だと、自動でズームする機能があるようです。 そこで、フォームの文字サイズを16px以上になるように設定します。

input[type="text"]{
   font-size: 20px;
}

ただし、CSSによるzoomが指定されてページ自体が縮小表示されていたら効かない場合があります。

ユーザーによる拡縮を禁止する【非推奨】

meta要素でユーザによる拡縮を禁止すれば、自動ズームはなくなります。

<meta name="viewport" content="width=device-width, user-scalable=no">

しかし、こちらはかえってユーザビリティーを悪くしてしまうので推奨はできません。

フォーカス時のみmetaを書き換える【非推奨】

入力フォームにフォーカスしたときのみ、user-scalableの値を書き換えればユーザビリティを維持することはできます。

しかし端末によっては正常に動作しない場合があるので、自己責任のもとお使いください。

var $target   = $('input[type="text"]');
var $viewport = $('meta[name="viewport"]');
$target.on('focus',function(){
     $viewport.attr('content', 'width=device-width, user-scalable=yes');
}).on('blur',function(){
     $viewport.attr('content', 'width=device-width, user-scalable=no');
});

jQueryに頼らずにmetaを取得するなら、こんな感じでしょうか。

var viewport = {};
var metalist = document.getElementsByTagName('meta');
for(var i = 0; i < metalist.length; i++) {
    var name = metalist[i].getAttribute('name');
    if(name && name.toLowerCase() === 'viewport') {
        viewport = metalist[i];
        return;
    }
}