こんにちは、フルスタックエンジニアのryuです。
今回の記事では、safariブラウザの時のみCSSを適応させたい場合の対処方法について解説します。Webの開発をしてるとき、safariブラウザのみデザインが崩れる現象が起こりました。webkit系の設定などを一通り試しても修正できなかったので、javascriptでブラウザ判定を行い、CSSを適応させました。
safariブラウザの時のみCSSを適応させたい場合の対処方法¶
今回の記事では、safariブラウザの時のみCSSを適応させたい場合の対象方法について解説します。
私の場合、Webで検索した内容に対処方法が無かったのでJavascriptとCSSを連携させて解決しました。若干無理やりデザインを調整している感はありますが、そこはご了承ください。
Javascriptでsafariを判定する¶
まず、Javascriptを使用してsafariブラウザの判定を行います。コードは以下の通りです。
<script>
const agent = window.navigator.userAgent.toLowerCase()
if (agent.indexOf("msie") != -1 || agent.indexOf("trident") != -1) {
} else if (agent.indexOf("edg") != -1 || agent.indexOf("edge") != -1) {
} else if (agent.indexOf("opr") != -1 || agent.indexOf("opera") != -1) {
} else if (agent.indexOf("chrome") != -1) {
} else if (agent.indexOf("safari") != -1) {
//ここでsafariと判定して処理を実行する
}
</script>
ブラウザの判定をする際は、JavascriptのuserAgentを使用します。userAgentでは、ブラウザなどの情報を取得することができます。userAgentの詳細については、こちらの記事をご覧ください。
・参考: NavigatorID.userAgent | MDN (mozilla.org)
Javascriptのif文を使用して、safariブラウザでアクセスされた場合にCSSを適応させます。
jQueryでCSSを適応させる¶
次に、jQueryを使ってCSSを適応させます。以下のコードを記入します。
<script>
const agent = window.navigator.userAgent.toLowerCase()
if (agent.indexOf("msie") != -1 || agent.indexOf("trident") != -1) {
} else if (agent.indexOf("edg") != -1 || agent.indexOf("edge") != -1) {
} else if (agent.indexOf("opr") != -1 || agent.indexOf("opera") != -1) {
} else if (agent.indexOf("chrome") != -1) {
} else if (agent.indexOf("safari") != -1) {
$(".className").css("fontSize","1.8rem");
}
</script>
これで、safariブラウザの場合に文字の大きさを1.8remに変換する機能を実装できました。これは、safariブラウザ以外にも同様に設定することができます。
safariブラウザの時のみCSSを適応させる方法まとめ¶
今回の記事では、safariブラウザの時のみCSSを適応させる方法を解説しました。”-webkit”系などのCSSを試してもダメだった場合に試してみてください。
当ブログでは、このようなIT技術の発信をしているので興味のある方は是非ご覧ください。
