frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【css】android4.3とandroid4.4の差が激しい

スポンサードリンク


スポンサードリンク


android2系は、使えないプロパティが多いイメージでしたが、実は4系でも4.1~4.3までは使えないことが多いことに気づきました。

1位 display:flex

flex系は対応していません。4.4から対応しています。

flexの対応状況はこちら↓
Can I use... Support tables for HTML5, CSS3, etc

2位 calc

ちなみにIE8も×です。calc使えないとか痛いです。

そのため50%に近い値を入れてそのあとcalcを指定すればandoroid4.4以前の端末以外はcalc読んでくれます。

        width: 47.5%;
        width: calc(50% - 8px);

3位 display:inline-block

display:inline-block自体はもちろん使えますが、横並びにしたときにできる隙間をなくすfont-size: 0;が効きません。

li要素を改行せず書けばクリアできますが、運用性が悪いです。(そのルールやナレッジを知らない人が運用していく可能性も考慮)

floatを使うかwidthで調整するかでしょうか。

下記記事でも被害報告がされていますね。

liginc.co.jp

iwb.jp

まとめ

対象端末で使える・使えないプロパティは実装前に確認する