最近はWordPressのテーマを、UnderscoreSとBootstrap3を使って作ることが多いです。
ただ、あるサイトではスマートフォンで見た時に普通に見れるのに、別のサイトだと横にずれるような現象に遭遇しました。
以前、overflow : hiddenで解決できるというのを見て、すぐにbody要素にやってみたのですが解決せず。さらにこれって、実はスクロール自体もできなくなっていたようで大間違いだったことがさっきわかりました。
目次
あらためて、「スマホサイト 横にずれる」で検索
ググってヨッセンスさんのサイトを発見。
[CSS] スマホ対応は超重要! 私が最低限やっている5つのこと | ヨッセンス
こちらのサイトをよく読み、やっぱりbody要素じゃなくdiv要素にoverflow:hiddenを試してみることにしました。
underscoreSでサイトを作ると、ページの一番外側のdiv要素はdiv#pageになります。
なので、ここにoverflow:hiddenをしてみると良さそうです。
よこズレは解決したんだけど、
果たして、無事によこずれは解決することができました。
ただし、サイトをスクロールしてみていくと、ちょっと気になるところが….
英単語が折り返さない時はword-wrap: break-wordを使う
こんな風に英単語が折り返さない部分がありました。
おそらく、今回このサイトがよこズレした理由は、この折り返さない英単語がページ上に表示されていたからで、他のよこズレしなかったサイトは、たまたましていなかっただけだと推測されます。
また、overflow:hiddenしてしまったことで、この英単語の表示も微妙な感じです。
たしか、英単語を折り返すCSSがあったと思い、こちらもぐぐってみるとこちらのサイトを発見。
長い英単語を途中で折り返したいときの CSS の指定方法: Days on the Moon
CSSで、word-wrap: break-wordをすると、英単語を折り返すことができるようです。
要素は何にするか迷ったのですが、とりあえず全体にかけることにしました。
* { word-wrap: break-word }
不具合があったら、また治したいと思います。
まとめ
スマホで見てみると、PCだと問題なかったところに問題がでたり、問題はないけどいけてない状態になったりすることが多々あります。
先ほどあげたヨッセンスさんのサイトには、よこズレ以外にも修正するべき内容が説明されているので、すごく参考になると思います。
