HTMLでiPhoneのWebページズームを無効にする方法

ビューポートメタタグでユーザーのズーム操作を制限する

metaタグにuser-scalable=no属性を指定すると、ユーザーがページをピンチ操作などで拡大することを防げます。

以下のmetaタグをheadタグ内に追加すれば、ズームを完全に無効化できます。この設定により、モバイルブラウザはデバイス幅と同じスケールを使用し、ユーザーによるズームインを一切許可しなくなります。その結果、iOS端末でinputフィールドにフォーカスした際に画面が勝手に拡大されるといった煩わしい挙動も防止できます。ただし、アクセシビリティの観点から、この方法はユーザーフレンドリーではないという意見もある点には注意しましょう。

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

select要素とoption要素の役割

<select>要素は、1つ以上の<option>要素と組み合わせて使用することで、Webフォーム向けのドロップダウンリスト(選択肢の一覧)を生成します。<select>要素がリスト全体を定義し、それぞれの<option>要素がリスト内の選択可能な項目として表示される仕組みです。

フォントサイズの指定でフォーカス時の自動ズームを防ぐ

iOS Safariでは、入力フィールドやselect要素のフォントサイズが16px未満だと、フォーカス時に画面が自動的に拡大されます。そこで、対象要素のfont-sizeを16px以上に設定することで、フォーカス時の自動ズームを回避できます。また、メディアクエリでdevice-aspect-ratioを条件にすれば、特定のアスペクト比を持つデバイスに対してのみ16pxのフォントサイズを適用することも可能です。

select {
    font-size: 40px;
}