HTML でレスポンシブ Web デザインにビューポート メタ タグを使用する方法

このブログでは、HTML でレスポンシブ Web デザインにビューポート メタ タグを使用する方法について説明します。

• ビューポート メタ タグとは何ですか?
• メタ タグのさまざまな属性

ビューポート メタ タグとは何ですか?

「 ビューポート 」は、さまざまな画面サイズでコンテンツがどのように表示されるかを制御することで、レスポンシブ デザインを作成するための最も重要なタグです。このタグは「 <頭> 」セクションで、2 つの属性が含まれています。最初のものは「 名前 ” 属性はこのタグの目的を示し、2 番目の属性は “ コンテンツ 」で提供される値に関連するデータを保持します 名前 ' 属性。

ビューポート メタ タグのさまざまな属性

ビューポート メタ タグには、「 コンテンツ ' 属性：

「幅」属性

「 幅 」属性は、コンテンツの Web ページの可視領域を垂直方向に指定します。そのメタ タグは次のようになります。

「高さ」属性

「 身長 」属性は、ビューポートの高さが画面の高さと一致するように Web ページの垂直方向の長さを設定します。そのメタ タグは次のようになります。

「初期縮尺」属性

「 初期スケール 」属性により、Web ページが最初にロードされたときに適切なズーム レベルで表示されるようになります。たとえば、次のコードにアクセスしてください。

「最大スケール」属性

「 最大スケール 」属性は、レイアウトの問題を防ぐために Web ページの最大ズーム レベルを指定します。

「最小縮尺」属性

「 最小スケール 」を使用して、ズームアウトの最小スケール レベルを指定することにより、ユーザーがズームアウトしすぎないように制限します。

「ユーザースケーラブル」属性

「 ユーザーがスケーリング可能 」属性は、値を「 いいえ ' また ' はい 」。ユーザーがズームインまたはズームアウトできるようにするメタ タグは次のとおりです。

HTML でレスポンシブ Web デザインにビューポート メタ タグを使用する方法

レスポンシブ Web デザインのためのビューポート メタ タグの使用法をよりよく理解すること。例を見てみましょう：

「