Androidのブラウザで画面をダブルタップをするとその部分がズームされ、ズーム時の画面の横幅にピッタリ合うように、テキストの幅を自動で調整する機能があります。また、拡大された状態でダブルタップをすると、元の画面に戻り要素の幅も元に戻ります。
ところがこの機能はfloat、特にfloat:rightと組み合わせると下記のような不具合を起こします。
■起こる問題の例
(1)最初のテキストの幅
横幅(16文字分)を指定したこんなテキストがあるとします。
この要素はfloat:rightで配置されています。
----------------------------------------
テキストテキストテキストテキスト
----------------------------------------
(2)ダブルタップでズーム
画面がズームされその画面の横幅(8文字分)に調整されます。
float:rightのためと右端を基点に縮小されます。
つまり、以下のように左に隙間ができて縮まった状態になります。
----------------------------------------
テキストテキスト
テキストテキスト
----------------------------------------
(3)ダブルタップで元に戻す
元の幅(16文字分)に戻る際、縮小されたときと同じく右端を基点にしてくれると思いきや、縮小された時点での左端を基点に元の幅にもどります。
すると、以下のようになります。(1)と同じ画面に戻りたかったのに、テキストの開始位置は右にずれ、レイアウトに崩れが生じます。
----------------------------------------
テキストテキストテキストテキスト
----------------------------------------
■解決方法
テキストを含む要素の親要素にもwidthを指定することで、
(3)のダブルタップで元に戻った際の基準を左端にすることができ、
上記の不具合は起こらなくなりました。
※例えば上がp要素に対してwidthを指定して上の現象が起きたら、そのpを包んでいるdivなりにもwidthを指定すれば良いです。
「Androidのブラウザでダブルタップで拡大した後元に戻すと表示が崩れる」という現象が起きたときは思い出してみて下さい。
※最後に、この現象はキャッシュの無い状態のみで起こります。
この不具合がおきておかしいと思ってリロードすると不具合は起こらなくなります。
キャッシュを消して再度読み込めば現象は再現されます。
