vsCodeでコーディングしたものをLive Serverで表示するとhtml要素のwidthが約4000pxになる

Question

現在vsCodeを使用してコーディングをしております。
拡張機能のLive Serverを使用して、表示の確認をしているのですが、なぜかhtml要素のwidthが約4000pxのとても広い幅になってしまいます。
念のため、Bracketsで同じファイルを開いてみると問題なく1000px台の表示になりました。
ですので、vsCode自体の設定か、拡張機能の設定に問題があるだろうと考えております。
しかし初心者ゆえに、どの設定をどういじればよいのかわからずに困っております。

ちなみに使用し始めは問題なく、通常の幅で表示されておりました。
特に設定をいじった記憶はなく、コーディング後に更新をしたら突然表示がおかしくなり、widthが広くなっていることに気が付きました。
ですので何をしたら今の状態になったかすら理解しておりません。

実際、サーバーにindex.htmlのファイルをアップすると、通常とおりの幅で表示されます。

情報が少ない中での質問ではございますが、おわかりの方がいらっしゃいましたらよろしくお願いいたします。

Answer 1

原因は分かりませんが，画面にフィットさせる方法としては，

• headに<meta name="viewport" content="width=device-width,initial-scale=1">

を追加して，body{width: 100vw;}を記述

• 単純にbody{position: fixed; top: 0; left: 0; right: 0; bottom: 0;}を記述

などがあります．これらでフィットしない場合は，設定の問題か，もしかするとバグかもしれません

もし，LiveServer上で開発者ツールを開けるなら，それで，何が原因でwidthが広がっているのかを確認してみてください．（通常のブラウザであれば，ページ上で右クリックし，「要素を検証(insepect element)」を押したり，ショートカットキーを使ったりすることで，開発者ツールを開けます．）

Comments

[kechin03]

ご回答ありがとうございます。

上記2点試してみましたが、変化がありませんでした。
LiveServer上というと、LiveServerを使ってchromeで確認しておりますが、chromeのデベロッパーツールのことでよろしいでしょうか？
もしそうだとして、恥ずかしながら「何が原因で広がっているか」の確認がどこでできるのかがわかりません。
どちらの確認をしたらよろしいでしょうか？

よろしくお願いいたします。

[_lemon2003_]

[F12] -> [Elements]タブ ->□にカーソルのボタンをクリック -> 広がっている要素をクリック -> 下か右にある、[Styles]タブ -> width: 何とかpx ってなってるところ。適用されているものは、取り消し線が引かれていない。
左のチェックボックスで、適用<->不適用を切り替えられる。

[kechin03]

コメントありがとうございます。
width関連の適用不適用になっている部分を切り替えても(Aを適用から不適用、Bを不適用から適応)とくに何も変わりませんでした。

ちなみに上記liveAsNotes様のコメントにあるコードをbodyではなく、親要素のhtmlに適用してみても変化なしでした。