スマホでクロームのみ分岐させ、cssを適用する

if_mob_chorome.css

@charset "utf-8";


.footer_call .flex_wrap {padding-bottom: 12px;}

if_mob_chorome.php

<script>

var path = "<?php echo get_template_directory_uri(); ?>";

var userAgent = window.navigator.userAgent.toLowerCase();
    
if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
    //IE向けの記述
}else if(userAgent.indexOf('edge') != -1) {
    //旧Edge向けの記述
}
else if(userAgent.indexOf('chrome') != -1) {
        // //Googleクロームへの処理
        // var d = document;
        // var link = d.createElement('link');
        // link.href = path + '/if_mob_chorome.css';
        // link.rel = 'stylesheet';
        // link.type = 'text/css';
        // var h = d.getElementsByTagName('head')[0];
        // h.appendChild(link);

}
else if(userAgent.indexOf('crios') != -1) {
        //iOS Googleクロームへの処理
        var d = document;
        var link = d.createElement('link');
        link.href = path + '/if_mob_chorome.css';
        link.rel = 'stylesheet';
        link.type = 'text/css';
        var h = d.getElementsByTagName('head')[0];
        h.appendChild(link);

}

else if(userAgent.indexOf('safari') != -1) {
    //Safari向けの記述
}else if(userAgent.indexOf('firefox') != -1) {
    //FireFox向けの記述
}else{
    //その他のブラウザ向けの記述
}


</script>

 

ヘッダー

<?php ////////////////////////上書きcss ブラウザで判別
include(get_template_directory() . "/5_head/if_mob_chorome.php"); ?>

参考

path +

https://zenn.dev/itooo_web/articles/8d37f720e73c98

 

https://kaworu.jpn.org/kaworu/2008-05-24-2.php

 

ここに複数　でもうごくか？

外部CSSファイルをJavascriptから読み込む方法

 

https://arts-factory.net/useragentbrowser/