【Android】4系で幅が効かずに空白ができることがある件について

  • 投稿日
  • 著者 ituki
  • カテゴリー Program
Pocket
LINEで送る

このバグですが、現象としては下記のときに起きるみたい

  • ・Android4系のみ（4系でもGALAXY S III SC-06D起きないっぽい）
  • ・pタグでテキストのみ

対処法としては、二種類あります

  • ・バグが起きた要素に背景色・背景画像を指定
    （ただし、display:tableやdisplay:table-cellなんかだと効かない）
  • ・viewportの指定でなんとかする（PCサイト用だと下記コードの要な感じで）
(function(){
var agent = navigator.userAgent;
if (agent.search(/Android 4/) !== -1) {//Android4系のみ。下位バージョンで効くとバグが起きる
$("head").append($('<meta name="viewport" content="width=device-width,user-scalable=yes,target-densitydpi=device-dpi,initial-scale='+(screen.width/＊＊＊)+'">'));
//＊＊＊のところは、コンテンツのサイズを入れる
}
});

なぜかこのバグぐぐってもあんまり対処法が見つからない・・・気づいている人が少ないのか、それとも4系まだ少ないから？いろんなサイトで起きているみたいですが・・・

参考：
[Android][css] 「ページの自動調整」でデザインが崩れる
Android4.0端末で右側に空白ができちゃう系トラブル
Android 4で改行位置が狂う | count0.org

Android