javascript - モバイル用の条件付き JavaScript

Question

私は今、この問題に対するさまざまな解決策を数週間試してきました! :(

デバイスの幅に基づいて条件付きで JavaScript をロードしたいと思います。これは、私の固定メニュー div がデスクトップの画面でスクロールし、モバイル/タブレットにとどまるようにするためです。

これが私のスクリプトです。

<script type="text/javascript">
jQuery(function($) {
function fixDiv() {
  if ($(window).scrollTop() > 310)
    { 
    $('#Portfolio-Sidebar-Content-Web').css({'position': 'fixed', 'top': '0', 'margin-top': '20px'}); 
    }
  else
    {
    $('#Portfolio-Sidebar-Content-Web').css({'position': 'static', 'top': 'auto', 'margin-top': '0'});
    }
}
$(window).scroll(fixDiv);
fix5iv();
}
});
</script>

追加してみました;

<script type="text/javascript">
jQuery(function($) {
if ( $(window).width() > 480) {
function fixDiv() {
  SCRIPT FUNCTION
}
});
</script>

...と;

<script type="text/javascript">
jQuery(function($) {
if (matchMedia('only screen and (max-width: 480px)').matches) {
function fixDiv() {
  SCRIPT FUNCTION
}
});
</script>

また、CSS を使用して @media クエリを試し、デバイスの幅に基づいて div の位置を変更しました。これには何の結果もありません。javascript のスタイリングが重要であるように思われるため、スタイル シートで適用するスタイリングをオーバーライドします。

私が試したJavaScriptの変更により、モバイル/タブレットとデスクトップの両方でスクリプトが無効または有効になりました。だから私のコードは動作しますが、デバイスの幅を正しく検出していないようです。

私のビューポート設定がデバイスの幅を妨げている可能性があることが明らかになり、どのブラウザーでも同じ結果が得られました。

<meta name="viewport" content="width=1100"/>

ただし、このスニペットを無効にした (コードから完全に削除した) 後でも、同じ問題が発生します。

明らかな何かが欠けていますか？解決策は存在しませんか？

よろしくお願いします。