CSS

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

Linuxサーバーの画面

こんにちは、フルスタックエンジニアの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技術の発信をしているので興味のある方は是非ご覧ください。

About me
大手メーカのIT部門→上場ベンチャーでフルスタックエンジニアやってます。エンジニア歴は8年目。 サーバ、ネットワーク、セキュリティ、クラウドについて投稿します。 AI、ARも勉強中です! youtubeでも技術ネタを発信していきます。↓のアイコンよりご覧ください!

UdemyでIT講座をチェック!

  • セールだと1500円前後!
  • 無料サンプル講義動画・無料講義動画あり!
  • 気に入らなければ30日間返金保証!