FlexboxがAndroid4.2.x系のとある端末で効かなかった時の処置

2015年6月4日

とある案件でCSS3のFlexboxがAndroid4.2.x系のとある端末で効かなかった時の処置です。（非推奨やと思います）

Android4.2.x系でもサポート自体はされているようなのですが、なぜか効かないという事例がありました。

対応策

なぜ効かなかったのかはわからなかったのですが、力技の対応策として、jQueryの「.insertAfter」を使って要素位置を変えるという手法です。
※スマホ時の縦位置のレイアウト調整のための用途だったので。

/* 位置入れ替え */
$(function() {
var ua = navigator.userAgent;
var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8));
var wSize = $(window).width();
if(androidversion == 4.2 && wSize < 641){
$(".sample1").insertAfter(".sample3"); // 位置入れ替え
$(".sample4").insertAfter(".sample5"); // 位置入れ替え
}
});

Androidのバージョンを取得して4.2系列で且つウィンドウの幅が641px以下の時だけ実行するようにしています。

あまりよくない対策ですが、発想の切り替えによる力技でした。