はじめに
どうもこんにちは高専の冬休みが終わりを迎えそうでかなり悲しい気持ちになっているげんしです。
いつになったら僕は課題に手を付けるんでしょうか？
非常に楽しみですね。
何が起こった？
前のポートフォリオがかなりダサかったので久々に作り直していて「あとはスマホ対応だ」という時にchrome dev toolでiphone Xでのページの挙動をみてみると、、
このように謎の余白が生まれていました。
絶対にここに余白ができるように書いていないのに余白ができているのですこし調べ倒してみました。
すると chromeだとbody要素に強制的にmargin 8pxが入ってしまうらしくこれが原因だということが分かりました。
調べてみると
body{margin:0px;}というふうにすれば余白が消えるとあったので
nuxt.config.js
exportdefault{css:['../assets/main.css',],}外部ファイル,main.cssを追加し試してみたところうまく消えてくれませんでした。
解決方法
上の様にnuxt.config.jsで外部ファイルを読み込めるようにしたあとに
main.css
body{overflow:hidden;}というように収まっていない部分をoverflow: hidden;で非表示にすることで解決しました。
まとめ
恥ずかしながらこの余白が消せないで1時間ほど溶かしてしまったので、この記事が僕と同じところで詰まっていしまっている人の助けになってくれると嬉しいです。