【CSS】safariブラウザの時のみCSSを適応させたい場合の対処方法解説！

こんにちは、フルスタックエンジニアのryuです。

今回の記事では、safariブラウザの時のみCSSを適応させたい場合の対処方法について解説します。Webの開発をしてるとき、safariブラウザのみデザインが崩れる現象が起こりました。webkit系の設定などを一通り試しても修正できなかったので、javascriptでブラウザ判定を行い、CSSを適応させました。

※本ページには、プロモーション・アフィリエイトリンクが含まれています

safariブラウザの時のみCSSを適応させたい場合の対処方法
- Javascriptでsafariを判定する
- jQueryでCSSを適応させる
safariブラウザの時のみ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ブラウザ以外にも同様に設定することができます。