[Android][css] 「ページの自動調整」でデザインが崩れる

 これ結構困っている人がいると思うんですが、PC向けサイト等スマホ向けに最適化されていないページをAndroid 4.0で閲覧したとき、テキストが左側に寄ってしまって謎の空白ができてしまいます(手元にAndroid端末がないのでスクリーンショット載せられないですごめんなさい。誰か暇な人は再現してスクリーンショット撮ってもらえると助かります…)。
 どうも「ページの自動調整」を有効にしているとこのバグが発生するようです。ググっても全然回避策が見つからなかったので、メモもかねてまとめておきたいと思います。

原因は

 わかりません。もともと「ページの自動調整」は、スクリーンのダブルタップした時に画面の幅にあわせて文字サイズなどを適切に変更してくれる便利な機能なのですが、なぜかAndroid 4.0では縮小した時にもこの機能が働いてしまい、中途半端な表示になってしまうようです。つかAndroid 2.3ではちゃんと動くので4.0のバグじゃないでしょうかね。主に以下の様な特徴があります。

  • Android 4.0でのみ確認。
  • タグの中にテキスト以外が入っていると症状が出ない。
  • 背景画像または背景色が指定されていると症状が出ない。
  • display属性が「table」になっていると、上記2つを満たしていてもこの不具合が発生する。

 要するに上記をなんとかすれば直ります。

直す方法

 基本的にはタグの中身がテキストだけだと、この不具合が出るようです。直すには、背景画像か背景色を指定します。背景色を「transparent」にしただけでは直りませんでした。具体的な値を指定する必要があるようです。また、「inherit」を指定することも可能ですが、その場合は親要素に「transparent」以外の値が指定されている必要があります。

p, div {
    background-color: red;
}

 もちろん、背景色を変更できない場合も多々あると思います。その場合は、1x1の透過PNG画像を背景画像として指定することで対応できるようです。

p, div {
    background-image: url(./imgs/dummy.png);
}

 また、「display」属性が「table」の時はどうやってもうまくいかないようです。他の値を指定するようにしてください。

 これでおそらくうまく表示できるのではないかと思います。できなかったらごめんなさい。ただ、この方法はページの自動調整機能をうまい具合に潰すことで綺麗に表示させているので、当たり前ですが拡大した場合でもページの自動調整機能はうまく機能しません。まぁ表示がぐちゃぐちゃになる問題よりかはよほどマシだとは思いますが…

 「めんどくさがらずにスマホ向けに設計しろよ」って話なのかもしれません…
 先生早く直して><

0 件のコメント :

コメントを投稿