iOSやAndroidの何れかにだけ当てたいCSSがあるときに使える方法です。ちょっとアレンジすればCSSに限らずiOSとAndoridで異なる処理をしたいときにも使えます。
UserAgentでOSを判別して処理を分岐する
やっていることはシンプルで、UserAgent文字列を取得してiosと判断できる文字列が含まれていれば「is-ios」、Androidと判断できる文字列が含まれていれば「is-android」を任意の要素に付与しているだけです。
JavaScript
elmはCSSを当てたい要素のID。is-ios、is-androidはそれぞれiOS、Androidだと判断された場合に付与するクラス名です。
ID名・クラス名はなんでも良いのでお好みで変更してください。
↓必要な部分だけ書くとこんな感じ。
[code lang=”js”]
const elm = document.getElementById(‘elm’);
const ua = navigator.userAgent.toLowerCase();
if (ua.indexOf(‘iphone’) > -1 || ua.indexOf(‘ipad’) > -1) {
elm.classList.add(‘is-ios’);
} else if (ua.indexOf(‘android’)) {
elm.classList.add(‘is-android’);
}
[/code]
[code lang=”js”]
const addUaCss = () => {
const elm = document.getElementById(‘elm’);
const ua = navigator.userAgent.toLowerCase();
if (ua.indexOf(‘iphone’) > -1 || ua.indexOf(‘ipad’) > -1) {
elm.classList.add(‘is-ios’);
} else if (ua.indexOf(‘android’)) {
elm.classList.add(‘is-android’);
}
};
document.addEventListener(‘DOMContentLoaded’, () => {
addUaCss();
}, false);
[/code]
これでiOSの場合は#elmの要素にis-iosクラスが、Andoroidの場合はis-Androidクラスが付与されるので、あとはCSSで任意のスタイルを設定してあげてください。
CSS
特に書くまでもないですが。中身はお好きなように！
[code lang=”css”]
#elm {
/* iOS、Andorid共通 */
}
#elm.is-ios {
/* iOSのみ適用したいスタイル */
}
#elm.is-android {
/* Androidのみ適用したいスタイル */
}
[/code]
デメリットとか
UserAgentは割と簡単に偽装できるので、絶対に処理が分岐されないと困る！という場合は今回のような方法は向いてません。他の方法を検討しましょう。
個人的には見た目を整えるであったり、フッター周りの要素の位置やスタイルをiOS/Androidでちょっと変えたい程度であれば今回の方法で良いんじゃないかなーとは思います。
参考記事
その他の端末で判断したいとき、ブラウザで処理を分けたいときは以下の記事が参考になります。