Topics

Android 4系で結合したセルを持つテーブルが崩れる場合への対応

TechMemo Posted by: Masayuki Fukumoto

Android 4系で発症したバグっぽい事象です

PC向けのサイトではあるのですが、Android 4系のブラウザで見たときに結合したテーブルがガタガタに崩れるバグっぽい症状がありました。

症状は画像を見てください。

症状

対応方法

原因はよくわからなかったのですが、viewportを指定し、考えられるプロパティをすべて書いてみたところ直りました。
そして、プロパティを一つずつ削除していったのですが、target-densitydpi=device-dpiを削除したときに、症状が戻ってきました。

なので、

<meta name="viewport" content="target-densitydpi=device-dpi">

を<head>内に書きます。

なのですが、バグが出たのはAndroid 4系だけだったので、一応OSを見て処理をします。

var ua = navigator.userAgent;
  if(ua.search(/Android 4/) !== -1) {
  $("head").append($('<meta name="viewport" content="target-densitydpi=device-dpi">'));
}

これで一件落着したと思ってます。

関連記事

Page Top