988 views

この記事は最終更新から 1398日 が経過しています。

ToDo: 詳細は後日追記する。

1. 問題発生

作成中のページをスマホで見ていたら
意図せず水平スクロールしてしまった！

原因を探ると…
どうやら、長いURL文字列がブロック要素の右端を突き抜けて、親要素の幅を広げていること が原因のようだ。

該当するブロック要素には width:100% を指定してある。
その親要素 bodyには、画面幅いっぱいを期待して width:100% を指定してある。

でも…
パソコンやパソコン上のスマホシミュレーターでは表示領域右端で折り返しているのに、
スマホ実機の時だけは右端を突き抜け、ページが水平スクロールしてしまう。

2. 解決策

該当するブロック要素のstyleに以下を追記した。
親要素の右端に達したら、英単語の途中でも問答無用で折り返す ための指定だ。

「overflow-wrapとは？」は、こちらを参照されたい。

div{
  overflow-wrap: break-word;
}

何だか気持ちが悪いが、一先ずこれでスマホ上の横スクロールは起きなくなった。
後日ちゃんと調査しよう。