JavaScriptでユーザーエージェントを取得してiOS/Andoridのみ任意のCSSを適用する方法

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]

↓例えば上の処理をコンテンツが全て読み込まれたタイミングで実行したい場合は以下のような感じにします(addUaCssの名前もお好きなように変えてください)。

[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でちょっと変えたい程度であれば今回の方法で良いんじゃないかなーとは思います。

参考記事

その他の端末で判断したいとき、ブラウザで処理を分けたいときは以下の記事が参考になります。

JavaScriptでUserAgentを使った判別をする

よかったらシェアしてね!
  • URL Copied!