Тест JavaScript, если таблица стилей CSS применяется с медиазапросом CSS3

Question

У меня есть две таблицы стилей:

<link rel="stylesheet" type="text/css" href="/core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/core-desktop.css" media="only screen and (min-width: 800px)" id="css-desktop" />

Вторая должна быть загружена, только если окно имеет 800px или больше (более узкие дисплеи получают макет, более подходящий для мобильных устройств).

JavaScript должен знать, применяется ли эта вторая таблица стилей, я попробовал jQuery:

($(window).width() > 800)

Но когда вы достигнете ширины 790 - 810 пикселей, Chrome / Firefox (и, вероятно, другие) будетвернуть значение, например 791, и таблица стилей 800px + все равно будет загружена.

Я подозреваю, что это из-за полосы прокрутки (но нацеливание на $ (документ) или $ ('html') либо неработают или совпадают).

Так есть ли способ проверить, включен ли / активен / используется $ ('# css-desktop')?

Answer 1

Вы можете сделать следующее.

1. Создайте элемент div с display: none; в первой таблице стилей, чтобы он не отображался.
2. Во второй таблице стилей вы добавите position: absolute
3. В вашем Javascript вы проверяете if( $("#thediv").css("position") == "absolute")

position: absolute; применяется только во второй таблице стилей.

Answer 2

Есть проблема с тем, что вы пытаетесь.

Если пользователь просматривает страницу, изменяя размер окна ниже 800 пикселей в ширину, он получит мобильную версию страницы, а позже, когда развернется, он все равно получит мобильную версию.

Таким образом, использование ширины экрана не является надежным методом, поскольку в настоящее время разрешение экрана мобильных телефонов значительно растет.

Ваш лучший способ - прочитать User Agent информация браузера, которая легко покажет, является ли он мобильным браузером или другим, и загрузит файлы CSS в соответствии с ним.Затем для переменного разрешения экрана вы можете использовать свои текущие методы для загрузки кодов, специфичных для ширины.

Answer 3

Вот пример того, как вы можете попытаться определить ширину окна браузера * real : определить ширину окна и компенсировать полосы прокрутки - Javascript