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

2015/06/04

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

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

flex1.png

対応策

なぜ効かなかったのかはわからなかったのですが、力技の対応策として、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以下の時だけ実行するようにしています。

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