joomla template index.php with jquery

Question

私のjoomlaテンプレートでは、index.phpのheadセクションのスタイルシートへのリンクを削除し、代わりに次のjqueryコードを追加して、画面幅に基づいて使用されるスタイルシートを選択しました。

<script type="text/javascript"> 

$(document).ready(function() 
{ 
    if (screen.width <= 1024) 
    { 
     $('head').append('<link rel="stylesheet" href="style2.css" type="text/css"/>'); 
    } 
} 

$(document).ready(function() 
{ 
    if (screen.width > 1024) 
    { 
     $('head').append('<link rel="stylesheet" href="template.css" type="text/css/>'); 
    } 
} 
</script> 

ウェブサイトをブラウザに読み込むと、スタイルシートは使用されません。私は何が間違っているのか分からない。事前のおかげで

EvilPは、応答のためのおかげで、はい、CSSはあなたがJavaScriptで、あなたはさまざまなスタイルにFPRを提供するために、メディアクエリを使用する必要があることをすべきではない

Answer 1

のindex.phpと同じ場所に位置しています異なる画面サイズ

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
}