応答性の高いデザインを行うときに、モバイル ブラウザがページのサイズを自動的に変更しないようにする方法_html/css_WEB-ITnose

ご存知のとおり、レスポンシブ ページをデザインするとき、ページが傍受されるのを防ぐためにページ全体のサイズを縮小する特定のブラウザーに遭遇することがよくあります

コンテンツを表示するにはズームインする必要があります。これは、ページを自動的に調整するモバイルブラウザの機能です。

これは応答性の要件を完全に満たしていません。

それでは、ブラウザがページ サイズを自動的に調整しないようにする方法が問題になります。

他の人が書いたレスポンシブ コードを見ると、head タグに次のコードが表示されることがよくあります

<meta name="viewport" content="initial-scale=2.0,width=device-width"/>

タグ、name="viewport" はビューポートを制御することを指します。 、 content="initial-scale=2.0" はページを 2 倍に拡大することを意味します (同様に、0.5 は半分に縮小することを意味し、3.0 は 3 倍に拡大することを意味します),

同時に、width=device-widthページの幅がデバイスの幅と等しくなるようにブラウザに指示します。

タグは、ページのズーム可能な範囲を制御することもできます。次のコードを使用すると、ユーザーはページをデバイス幅の最大 3 倍まで拡大し、最小でもデバイス幅の半分まで圧縮できます。

<meta name="viewport" content="maximum-scale=3.0,minimum-scale="0.5",width=device-width"/>

もちろん、ズームを無効にすることもできます、

<meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>