2015.11.29
【Simplicity】スマホで謎の余白が右側に出た際の対処法
2日続けてSimplicityの記事になります。
最近スマホを購入したので自分のサイトを見てみると「謎の余白」を発見しました。
最初はCSSのミスを考えたのですが、何をやっても改善せず……
見る分には問題がないので数週間に渡り放置をしていました。
しかし、気持ち悪さを感じ、本日本腰を入れて問題に取り組みました。
結果、一応の解決を見たので共有をさせて頂きます。
スポンサーリンク
スマホで謎の余白が右側に出た際の対処法
具体的な症状
これはiPhoneの画面キャプチャです。こんな感じで「謎の余白」が発生していました。
具体的な時期は不明ですがSimplicity1.8の時から確認をしています。
当初はサイトのCSSをいじっていることが原因と考えたのですが解決方法がわからず途方に暮れていました。
本文エリアだけでなく、メニューにまで謎の余白が出現しています。
メニューはいじっていないのでCSSは関係ないのでは……と疑い出しました。
結論から書くとmobile.cssに「overflow: hidden;」を追加することで、スマホから余白が消えました。
#container {
overflow: hidden;
}
具体的には上記で「#container」に追記するかたちになります。
「overflow: hidden;」を設置することで、余白が消えました！
原因は何だったのか？
正直、詳しい原因は不明です。
そのため、この対応方法が正確なのかはわかりません。
参考にさせて頂いたサイト様では「#content 内の a 要素が長すぎることが原因？」と書かれていました。それ以外にも余白が発生するケースがあるようなので、詳しい原因は不明です。
原因がわからないのは気持ちが悪いですが、とりあえず僕と同じよう症状に悩んでいる方は上記の方法をまずは試して頂ければと思います。
PC上、スマホ上でいろいろなページをチェックしていますが、いまのところ問題はありません。トラブルが出た場合は、またこの場で情報を共有させて頂きます。
まとめ
スマホで謎の余白が右側に出た際の対処法を書かせて頂きました。
似たケースでお悩みの方は一度、試してみてもいいかもしれません。
ただし、僕自身原因がわかっていないので、何か他のエラーの原因になる可能性もあります。ご利用の際は、その点を検討して頂いた上で試してみてください！
それでは、本日はこれで失礼いたします！
created by Rinker
¥1,564
(2025/01/21 20:57:57時点 Amazon調べ-詳細)
この記事をお届けした
O3 WEBの最新ニュース情報を、
いいねしてチェックしよう！
O3 WEBの最新ニュース情報を、
いいねしてチェックしよう！
スポンサーリンク
関連記事