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); }

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

Site Search

Profile

profile

Web制作を生業にしています。主にHTML, CSS, JavaScript, PHP, WordPressのカスタマイズなどしてます。忘れっぽいので備忘録としてWebの小ネタを書いたり、人生のいろんなことを不定期にのんびり更新しています。小学生男児の母(シングルマザー)です。