主な問題は、ユーザーがズーム ボックスの外側をクリックすると、ズームがロックされ、ズームインまたはズームアウトできなくなることです。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
ビューポートは、Web ページのユーザーの可視領域です。 デバイスによって異なり、携帯電話ではコンピューターの画面よりも小さくなります。
width=device-width 部分は、デバイスの幅に合わせてビューポートの幅を設定します (デバイスによって異なります)。
initial-scale=1.0 部分は、ページがブラウザーによって最初に読み込まれたときの初期ズーム レベルを設定します。
maximum-scale=1.0 部分は、ユーザーがページ上でどれだけズームインできるかを設定します。 1.0 の値は、ズームが許可されていないことを意味します。
user-scalable=no の部分は、一部のデバイスでデフォルトで使用できる可能性があるズーム機能 (ダブルタップによるズームインなど) を無効にします。
モバイル Web ページでズームを無効にする方法
HTML のモバイル Web ページでズームを無効にするには、次のコードを使用します。
これにより、ページが表示されているデバイスの幅に収まるようになります。
ズームオフ
HTML でズームオフするには、zoom プロパティを使用します。 例えば：
ズーム: 1;
HTML スケーリングをオフにする
HTML スケーリングは HTML の機能で、Web ブラウザーがテキストや画像のサイズを拡大または縮小して、小さい画面または大きい画面で読みやすくすることができます。 ほとんどのブラウザでは、html-scaling プロパティを「none」に設定することで、この機能をオフにすることができます。
