Android 4.4.2以下で起こる、特にうざったい不具合・バグの解決法【厳選4策】

せいと


Android 4.4.2以下で起こる、特にうざったい不具合・バグの解決法【厳選4策】

こんにちは、フロントエンドエンジニアのせいとです。

突然ですが、みなさんの嫌いなブラウザはなんですか? IE8とかでしょうか。わかりますその気持ち。しかし、ブラウザ界にはもっと厄介な野郎がおります。

それが、Androidブラウザです。

一部ではChromeに似た性能などと言われておりますが、開発者からしたら、えっ・・・(;´Д`)といった感じです。Android OS 4.4.4辺りからかなりよくなってきましたが、4.4.2以下はiOS基準でコーディングすると不具合ありまくり。

そんなAndroidさんのバグ・不具合の中でも、今回はとりわけネット上で解決策が見つかりにくかったものと、その解決策をまとめてみました。ぜひ参考にしていただければと思います。

▼目次

position: fixedを指定している要素に%でwidthを指定すると無視される

これは、追従ヘッダーがあるサイトで、デバイスを横に傾けるとよく起こる不具合。追従ヘッダーは多くのサイトにあるので、遭遇する確率は高いと言えます。

解決策

pxを指定することで解決できます。とは言え、レスポンシブ対応したい場合は%で指定したいですよね。ですから、JavaScriptでウィンドウサイズの横幅に応じてpx指定するような記述を加えるといいでしょう。

以下はjQueryでさくっと解決させる例です。

<header id="js-header">...</header>
var $window = $(window),
	$header = $('#js-header');

function setHeaderWidth(){
	$header.css('width', $window.width());
}
setHeaderWidth();

$window.on('resize', setHeaderWidth);

Webfontが反映されない

他の環境では問題ないのに、AndroidブラウザでだけWebfontが反映されない、ということであれば、フォントデータの拡張子の問題かもしれません。比較的新しめの形式であるwoffは、多くのモダンブラウザでは当たり前に使えますが、Androidブラウザは対応していません(;´Д`)

解決策

適応させる場合は、TTFなどの別の形式のデータも用意しましょう。

しかしGoogle fontだと基本WOFFしかないので、別の形式のフォントデータは自前で用意するしかありません。その場合は、何かしらのアプリケーションなどを用いて、WOFFデータを他のデータ形式に変換して用いるといいでしょう。

武蔵システムさんのWOFFコンバータは、使いやすくておすすめです。

WOFFコンバータ:http://opentype.jp/woffconv.htm

z-indexの重なり順が狂う

これは昔からよくあるバグで、解決するのは結構めんどう……。しかし、比較的楽に解決する方法を2つ見つけたので、ご紹介します!

解決策1

z-indexの代わりにtranslate3dを代用することで解決できました。

/* 前面に置きたい要素 */
.hoge {
    transform: translate3d(0,0,2px); 
}
/* 背面に置きたい要素 */
.fuga {
    transform: translate3d(0,0,1px);
}

解決策2

また、タグの並びを、前面に置きたい要素ほど先に記述することでも解決できるケースがありました。

Bad

<div class="fuga"></div> <!-- 背面に置きたい要素 -->
<div class="hoge"></div> <!-- 前面に置きたい要素 -->

Good

<div class="hoge"></div> <!-- 前面に置きたい要素 -->
<div class="fuga"></div> <!-- 背面に置きたい要素 -->

display: inline-blockで横並びにした要素が段落ちする

要素を横並びにする手段として、display: inline-blockは使い勝手がよく、僕も利用頻度はかなり高いです。

ただし、これだけだと要素間の間に微妙な隙間が空いてしまうため、使う場合は大抵親要素にfont-size:0を指定してぴったり横並びにするハックを用いることになります。

<ul class="list">
	<li class="list__item list__item--col2">...</li>
	<li class="list__item list__item--col2">...</li>
</ul>
.list {
	font-size: 0;
}
.list__item {
	display: inline-block;
}
.list__item--col2 {
	width: 50%;
}

で、本来なら上記のコードで綺麗に要素が半分同士に横並びになるはずなんですが、これを使うと一部のAndroidでは段落ちして2段になります(;´Д`)

解決策1

liの閉じタグを取ることで解決できます。HTML5ならアリですね。

Bad

<ul class="list">
	<li class="list__item list__item--col2">...</li>
	<li class="list__item list__item--col2">...</li>
</ul>

Good

<ul class="list">
	<li class="list__item list__item--col2">...
	<li class="list__item list__item--col2">...
</ul>

解決策2

または、HTMLを改行せずに記述することでも解決できます。

Good

<ul class="list">
	<li class="list__item list__item--col2">...</li><li class="list__item list__item--col2">...</li>
</ul>

でも見づらい。。。

解決策3

CSSでギリギリ50%以下の数字を指定することでも解決できます。

Bad

.list__item--col2 {
	width: 50%;
}

Good

.list__item--col2 {
	width: 49.9999%;
}

ただ、これだと今度は他のブラウザに影響が出てしまうので、UserAgentでAndroidのデフォルトブラウザだけ判定して、それにのみ適応する方法をとるのがよさげです。

(function(){

    'use strict';

    //htmlタグを変数に
    var htmlTag =  document.documentElement;

    //userAgentを変数に
    var userAgent = window.navigator.userAgent.toLowerCase();

    //OS,ブラウザを変数に
    var ANDROID = 'android';
    var SPACE = ' ';

    //OSを判定してhtmlタグにクラスをつける
    if (userAgent.indexOf(ANDROID) !== -1) {
        htmlTag.className += SPACE + ANDROID;
    }
    
})();

このようなJSを書いておけば、<html>に”android”というクラス名がつくので、以下のようにAndroidにのみ適応するスタイルが書けます。

.android .list__item--col2 {
	width: 49.9999%;
}

まとめ

参考になりましたでしょうか。
Androidには厄介なバグが非常に多いので対処が大変ですが、少しでもみなさまの助けになれば嬉しいです。

せいと
この記事を書いた人
せいと

フロントエンドエンジニア

2012年入社

この記事を読んだ人におすすめ