こんにちは、LIGフィリピン支社代表のせいと(@seito_horiguchi)です。
突然ですが、みなさんの嫌いなブラウザはなんですか？ IE8とかでしょうか。わかりますその気持ち。しかし、ブラウザ界にはもっと厄介な野郎がおります。
それが、Androidブラウザです。
一部ではChromeに似た性能などと言われておりますが、開発者からしたら、えっ・・・(；´Д｀)といった感じです。Android OS 4.4.4辺りからかなりよくなってきましたが、4.4.2以下はiOS基準でコーディングすると不具合ありまくり。
そんなAndroidさんのバグ・不具合の中でも、今回はとりわけネット上で解決策が見つかりにくかったものと、その解決策をまとめてみました。ぜひ参考にしていただければと思います。
▼目次
- position: fixedを指定している要素に%でwidthを指定すると無視される
- Webfontが反映されない
- z-indexの重なり順が狂う
- display: inline-blockで横並びにした要素が段落ちする
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には厄介なバグが非常に多いので対処が大変ですが、少しでもみなさまの助けになれば嬉しいです。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
