質問: VSCodeにてポートフォリオサイトをつくりサーバーにアップロードすることができました。 iPhoneでレスポンシブの表示を確認してみるとディベロッパーツールでみていたものと異なっていました。 具体的には 背景画像をRPGの道中風にしているのですが ディベロッパーツールではこのようになる予定でした。 ![ディベロッパーツール](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/4f06ed58c280ecb0478de347fc230997.png) ですが実際表示を確認すると ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/3b83e1b7bcf4971439d135e612a521b5.png) このようになっていました。 これをみての自分は、ディベロッパーツールは可視部分のみに背景画像を適用しているためbackground-sizeをcoverにしていてもしっかり背景画像全体を表示できているのに対し、iphoneでみるとWebページ全体(見えてない部分も含めて)に背景画像を適用しているためディベロッパーツールよりも拡大されて表示されているのだな、と解釈しました。 これをディベロッパーツールのようにするにはどうしたらいいでしょうか? index.htmlのcss ``` body { background: #000 url('../images/background1.jpg') no-repeat fixed center bottom; background-size: cover; margin: 0px; color: #00bfff; text-align: center; font-size: 1.4rem; font-family: "Press Start 2P", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ``` 試したことはbackground-sizeをcoverから100vhに変更しました。ですがiphoneで開くと背景が一番下に行くだけで解決にはなりませんでした。
回答: bodyに背景を付けているのであれば、bodyに`height: 100%;`を追加するといいと思います。 ただ、body内の要素をスクロール可能にする必要があります。 (bodyがdevice-heightを超えると結局ずれてしまうので)