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

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

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

（１）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"); }

（２）1px×1pxの透過png　画像ファイルを準備

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

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

/*アンドロイド４系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); }

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

TOPページに戻る

カテゴリーリスト