Androidのダブルタップの自動調整を元に戻すとレイアウトが崩れる

Androidのブラウザで画面をダブルタップをするとその部分がズームされ、ズーム時の画面の横幅にピッタリ合うように、テキストの幅を自動で調整する機能があります。また、拡大された状態でダブルタップをすると、元の画面に戻り要素の幅も元に戻ります。

ところがこの機能はfloat、特にfloat:rightと組み合わせると下記のような不具合を起こします。



■起こる問題の例

(1)最初のテキストの幅
横幅(16文字分)を指定したこんなテキストがあるとします。
この要素はfloat:rightで配置されています。
----------------------------------------
テキストテキストテキストテキスト
----------------------------------------


(2)ダブルタップでズーム
画面がズームされその画面の横幅(8文字分)に調整されます。
float:rightのためと右端を基点に縮小されます。
つまり、以下のように左に隙間ができて縮まった状態になります。
----------------------------------------
　　　　　　　　テキストテキスト
　　　　　　　　テキストテキスト
----------------------------------------


(3)ダブルタップで元に戻す
元の幅(16文字分)に戻る際、縮小されたときと同じく右端を基点にしてくれると思いきや、縮小された時点での左端を基点に元の幅にもどります。
すると、以下のようになります。(1)と同じ画面に戻りたかったのに、テキストの開始位置は右にずれ、レイアウトに崩れが生じます。

----------------------------------------
　　　　　　　　テキストテキストテキストテキスト
----------------------------------------



■解決方法

テキストを含む要素の親要素にもwidthを指定することで、
(3)のダブルタップで元に戻った際の基準を左端にすることができ、
上記の不具合は起こらなくなりました。

※例えば上がp要素に対してwidthを指定して上の現象が起きたら、そのpを包んでいるdivなりにもwidthを指定すれば良いです。



「Androidのブラウザでダブルタップで拡大した後元に戻すと表示が崩れる」という現象が起きたときは思い出してみて下さい。

※最後に、この現象はキャッシュの無い状態のみで起こります。
この不具合がおきておかしいと思ってリロードすると不具合は起こらなくなります。
キャッシュを消して再度読み込めば現象は再現されます。

Android端末のページ内リンクの不具合(バグ?)

name・idと#pagetopを使ったごくごく当たり前のページ内リンクが、Androidの特定の端末で以下のようなおかしな動作をすることがある。
(1)#pagetopのリンクを押すと一瞬ページ最上部が表示されるものの元の位置に戻ってしまう。
(2)一度#pagetopで戻ったあと、再びページ内をスクロールし、もう一度#pagetopを押しても動作しない。

OSのバージョンも関係なく、新しい機種だからといって発生しないわけでもない。(1)についてはJavaScriptのscrollTop等を使っても同じ現象が起きたため対処不可。修正方法を知っている方がいたら教えて下さい。

Android端末で画面をダブルタップしたとき幅を自動調整する機能の名称

「リフロー」と言うそうです。幅を指定したdivもリフローされたりするので、時にレイアウトを崩すことがありやや厄介な挙動。
「背景に画像を指定する + display:block;」とするとその要素はリフローされなくなるらしい。
(背景が指定無しだったり色指定のみだとblockでもリフローされる)