メディアクエリ　と　viewport　について

メディアクエリーとviewportは一緒に使うが、別物として考える

なぜか頭の中で混じってきてたので少し整理する。

１番に謎だったのが

viewportをhtmlファイルに指定する際に記述する

これとviewportはセットなのか？

答え＞

①name=”viewport”

　　表示領域の設定をします、の宣言

②width=divice-width

　　表示領域の幅＝デバイスの幅（デバイスの幅＝各端末の幅の意味）

　　また、device-width＝立ち上がっているブラウザ、デバイスのスクリーンの

　　横の幅を指定する。PCで作成している＝PCのスクリーンの横幅がデフォルト

③initial-scale=1

　　1倍＝100％の拡大率で表示の意味

　　例）initial-scale=2　だと200％になるので画面より大きくなってしまう

■メディアクエリーCSSに記載　こっちはなんとなくわかる
@media (横幅〇〇px以下や□□px以上などサイズを指定){
セレクタ{CSSプロパティ:CSS設定値;｝

例）@media (max-width: 600px){h1{color: red;}}

　　　0-600の画面サイズで見ると赤色になる

ちなみにChatGPTに聞くと---

viewport=device-width,initial-scale=1は、モバイルデバイスでのウェブページの表示を最適化するためのメタタグです。このメタタグを使用することによって、デバイスの幅に基づいてページの幅を調整し、適切なスケーリングを実現します。これにより、ページが必要以上に拡大されたり縮小されたりせず、正しく表示されるようになります。

initial-scale=1は、ページの初期表示時にスケーリングを行うことを意味し、device-widthは、デバイスの幅を基準にしてページの幅を設定することを意味します。

デフォルトの980pxでの描画は、デバイスの幅に基づかず、デスクトップ画面サイズを前提としたものであり、モバイルデバイスでの表示には適していません。viewport=device-width,initial-scale=1を使用することで、モバイルデバイスでの正しい表示を実現することができます。具体的には、デバイスの幅に合わせた適切なスケーリングが行われるため、ページ全体がモバイルデバイスの画面に収まり、ユーザーがページ全体を見ることができるようになります。

---------------と回答あり、なんとなく分かるようなもう少し突っ込みたいような

考え方は分かったけど、使いこなせてない感が満載

色々書いてみてなんとなくでもいいので感触をつかみたい

メディアクエリ と viewport について

メディアクエリ　と　viewport　について