Joomla шаблон index.php с помощью jquery

Question

В моем шаблоне joomla я удалил ссылку на таблицу стилей в разделе head файла index.php и вместо этого добавил следующий код 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 находится в том же месте, что и index.php

Answer 1

Вы не должны делать это с javascript, вы должны использовать медиа-запросы для предоставления разных стилей для разных размеров экрана

/* 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 */
}