ECCUBE3：ヘッダーに仕込んだjavascriptがトップページ以外で実行されない

こんにちわ。
phpは少々かじっている程度の初心者です。
どうぞよろしくお願いいたします。

###前提・実現したいこと
現在ECCUBE3でお店を改修しております。
スマホでみた時、「PC画面を表示する」ボタンをフッターに表示し、
スマホでPC画面をみている時は「SP画面を表示する」ボタンをヘッダーに表示しています。

サイトはレスポンシブで、スマホでみた場合のみ、ユーザーエージェントでデバイスを振り分けをし、専用のcssを読み込ませ、閲覧中のサイト幅によって、PC表示ボタン、SP表示ボタンの表示非表示を制御しております。

###発生している問題・エラーメッセージ
上記の作りで、トップページには問題なく、表示されるのですが、
なぜかそれ以外のページではボタンが表示されません。
html内には存在しているので、ユーザーエージェントを振り分けるjavascriptが動いていないのかなと予想はたったのですが、どうすれば直るのかわかりません。
お力添えいただけますと、大変助かります。

###該当のソースコード
ヘッダーに記載しているjavascript

<script>
$("head").append("<meta name='viewport' content="
        +($.cookie("switchScreen") == 1 ?
                "'width=1024'" :
                "'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'")
        +" />");
 
$(document).ready(function() {
        $("#btnPC, #btnSP").click(function() {
                $.cookie("switchScreen", $(this).attr("id") == "btnPC" ? 1 : 0);
                location.reload();
                return false;
        });
});
<!-- ユーザーエージェントでデバイスを振り分け -->
if (((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) {
        document.write('<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/switch.css" type="text/css">');}
</script>