シングルマザーnolaの生活日記。Web制作の小ネタから、料理、お役立ちグッズ、美容の日記まで広く浅く更新中。

Android4.0.3でコンテンツの一部の幅が狭くなるバグ

[2016.01.18]

Android4.0.3でコンテンツの一部の幅が異様に狭くなっている不具合が発覚。

ググってみたらちらほらと同様の不具合が検索にヒット。以下の方法で回避できました。

(1)jsでAndroidのバージョンを判別して、htmlタグにclassを付与

// Androidのバージョン判断
function and_ver() {
  var and_ua = navigator.userAgent;
  if( and_ua.indexOf("Android") > 0 ) {
    var version = parseFloat(and_ua.slice(and_ua.indexOf("Android")+8));
    return version;
  }
}
if(and_ver() >= 4) { 
  // android4系
//alert("ad4");
$('html').addClass("and4");
}

(2)1px×1pxの透過png 画像ファイルを準備

(3)CSSを記述 (1)でhtmlタグに付与したクラス .and4 に以下のスタイルをあてる。

あてるタグはそれぞれ該当するタグに変更します。

/*アンドロイド4系widthが縮まるバグの対応
-------------------------------------*/
.and4 .main-container dd,
.and4 .main-container dt,
.and4 .main-container dd div,
.and4 .main-container th,
.and4 .main-container td,
.and4 .main-container p, {
	background-image: url(../images/android4wizhack.png);
	}

<注意>すでに指定している背景画像を上書きしてしまわないように注意。

  • LINE

Advertisement

Site Search

Profile

profile

人生のいたずら(笑)でシングルマザーになったnolaです。Web制作をしています。主にコーディングをしていて、他にJS、PHP、WPカスタマイズなども。産休を経て現在はフルタイムでお仕事復帰です!