制作部の関です。
今回は 「 【javascript】iPhone(iOS)やandroidなどデバイスごとにclassを簡単に切り替える方法 」についてのお話をします。
【javascript】iPhone(iOS)やandroidなどデバイスごとにclassを簡単に切り替える方法
先日可変重視（%やvw）のCSSでコーディングしていたところ、
AndroidとiOSでは表示される要素の位置が大きくずれてしまうことが起きてしまいました。
AndroidとiOSでは内部構造が異なるため、このようなことが起きるらしいです。
今回はAndroidとiOSごとにclassを切り替えてCSSをあてる方法を備忘録として残しておきます。
[HTML]
<div class=”device_class”>
[js]
<script>
let elem = document.getElementsByClassName(“device_class”);
Array.prototype.forEach.call(elem, function (elem) {
if (navigator.userAgent.indexOf(‘iPhone’) > 0) {
elem.classList.add(‘iPhone’);
}
if (navigator.userAgent.indexOf(‘iPad’) > 0) {
elem.classList.add(‘iPad’);
}
if (navigator.userAgent.indexOf(‘Android’) > 0) {
elem.classList.add(‘Android’);
}
});
</script>
iPhoneだと → <div class=”device_class iPhone”>
iPadだと → <div class=”device_class iPad”>
androidだと → <div class=”device_class Android”>
となります！！
これで「device_class」を振っておけば、各デバイスにあったclassが付与されます。
これはいざというとき使えるテクニックだと思います。
ぜひ皆さんもご活用してみてください。
以上、制作部の関でした。