VSCodeにてポートフォリオサイトをつくりサーバーにアップロードすることができました。
iPhoneでレスポンシブの表示を確認してみるとディベロッパーツールでみていたものと異なっていました。
具体的には
背景画像をRPGの道中風にしているのですが
ディベロッパーツールではこのようになる予定でした。
ですが実際表示を確認すると
このようになっていました。
これをみての自分は、ディベロッパーツールは可視部分のみに背景画像を適用しているためbackground-sizeをcoverにしていてもしっかり背景画像全体を表示できているのに対し、iphoneでみるとWebページ全体(見えてない部分も含めて)に背景画像を適用しているためディベロッパーツールよりも拡大されて表示されているのだな、と解釈しました。
これをディベロッパーツールのようにするにはどうしたらいいでしょうか?
index.htmlのcss
css
1body { 2 background: #000 url('../images/background1.jpg') no-repeat fixed center bottom; 3 background-size: cover; 4 margin: 0px; 5 color: #00bfff; 6 text-align: center; 7 font-size: 1.4rem; 8 font-family: "Press Start 2P", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 9}
試したことはbackground-sizeをcoverから100vhに変更しました。ですがiphoneで開くと背景が一番下に行くだけで解決にはなりませんでした。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/18 07:53
2019/01/21 23:26