検証していて、うげ、、、safariで崩れてる。。。とかでブラウザによって違うスタイルをあてたい！と思った時ありませんか？
基本はベンダープレフィックスで対応できますが、それだけでは対応できない時は、もうしょうがないのでUAで判断してスタイルをあてます。
UAとは
User-Agent(ユーザーエージェント)の略でユーザーが使用しているOS・ブラウザのことを指します。
この情報によってユーザーのOSやブラウザのバージョンを判断しそれに応じた対応を行うことが可能です。
ユーザーエージェント（User Agent：UA）は、「ネット利用者が使用しているOS・ブラウザ」のことを指す。
ユーザーエージェント とは 意味/解説/説明 【User Agent, UA】 | Web担当者Forum
ユニバーサルアナリティクスのことではないので混同しないようにご注意ください。
UAはどうやって取得するの？
JavaScriptで簡単に取得することが出来ます。
conat ua = navigator.userAgent;
console.log(ua);
// 結果
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"結果で出てきているのがユーザーのUAです。
とりあえず取得できれば良い！という場合はnavigator.userAgent;だけ覚えておけば大丈夫です。
簡単に説明すると、各ブラウザはnavigatorというオブジェクトを持っていて、そのプロパティとしてuserAgentというものを格納しています。
その情報をJavaScriptで確認する。というすんぽーです。
取得したUAで判断してスタイルを当てるには？
あとは指定したいUA情報と文字列の一致判定を行い、合っていればクラスを付与するなどとすれば、指定のOSの時だけクラスを付与できる→スタイルも付与できる。ということになります。
例：iOS11系にクラスを付与したい時
document.addEventListener("DOMContentLoaded", function () {
conat ua = navigator.userAgent;
if (ua.indexOf("iPhone OS 11") > 0) {
document.querySelector("body").classList.add("ios11");
}
});という感じ。
他のOSの時はどの文字列で判定すればいいの〜？？と困ったらgoogleで「ユーザーエージェント 〇〇（OS名）」などと検索すれば割と簡単に見つかるはずです。
今回はクラス付与を行いましたが、OSによって別のJS系処理なども可能です。
あまり使う機会は無いかも知れませんが覚えておくと役に立つかもです。
ちなみにそもそもブラウザにuserAgentプロパティが無かったら使えません。
調べてみましたが割と古いブラウザにも対応しているので基本大丈夫だと思っています。
自分が使った時はandroid4系でしたが問題なく使えました笑
コメント