Ответ 1

Итак, вы хотите, чтобы список всех допустимых параметров запроса css-медиа был эквивалентен JavaScript.

Попробуйте сделать это, опираясь на медиа-запросы спецификации W3C.

Типы носителей

Невозможно получить тип носителя (экран, печать и т.д.) напрямую с помощью свойства/метода JavaScript, поэтому вы должны полагаться на обходные пути, сценарии или плагины.

Я нашел:

• matchMedia polyfill кажется лучшим решением (используется также Modernizr и Respond.js)
• Обнаружение носителя CSS script (кажется, старое)
• jMediaType (по-прежнему зависит от css)

Функции мультимедиа (непосредственно обнаруживаемые)

1. Ширина

window.innerWidth/document.body.clientWidth/document.documentElement.clientWidth (см. ниже)

2. высота

window.innerHeight/document.body.clientHeight/document.documentElement.clientHeight (см. ниже)

3. Устройство ширина

screen.width

4. Устройство высоты

screen.height

5. Ориентация

window.orientation (см. ниже)

6. цвет

screen.colorDepth

7. разрешение

screen.pixelDepth/window.devicePixelRatio (см. ниже)

Функции мультимедиа (обнаружены косвенно)

1. ширина/высота

Учитывая различия между браузерами, вам нужна функция для получения width и height. Некоторое время назад я нашел этот фрагмент (не могу вспомнить, где), который работает кросс-браузер:

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0];

var width = w.innerWidth||e.clientWidth||g.clientWidth;

var height = w.innerHeight||e.clientHeight||g.clientHeight;

2. коэффициента пропорциональности

отношение значения знака "ширина носителя" к значению "мультимедийная функция"

width/height (см. выше)

3. Устройство коэффициента пропорциональности

отношение значения "ширина устройства" к значению "высота устройства"

screen.width/screen.height

4. разрешение

плотность пикселей устройства вывода. "Dpi" и "dpcm" единицы описывают разрешение выходного устройства, то есть плотность пикселей устройства.

Так что это не размер экрана (ширина х высота), как многие думают!

var resolution = window.devicePixelRatio||screen.pixelDepth||screen.colorDepth;

screen.pixelDepth предназначен только для Firefox, и вы можете найти window.devicePixelRatio совместимость на quirksmode.org.

Здесь я читаю, что screen.colorDepth в порядке возврата.

5. монохромный

количество бит на пиксель в монохромном буфере кадров. Если устройство не является монохромным устройством, значение выходного устройства будет 0

if ( screen.colorDepth == 2) {
    var monochrome = /* retrieve resolution here, see above */;
}else{
    var monochrome = 0;
}

6. Ориентация

- это "портрет", когда значение "носителя высоты" больше чем или равно значению функции ширины носителя. В противном случае Ориентация - это пейзаж.

if ( width > height ) {
    var orientation = 'landscape';
}else{
    var orientation  = 'potrait';
}

Свойство window.orientation не поддерживается всеми браузерами и возвращает числовое значение, поэтому оно напрямую не связано с ориентацией по назначению W3C. Для получения дополнительной информации см. этот ответ на SO.

Функции мультимедиа (неопределяемые)

Я не смог найти способ обнаружения следующих медиа-функций с помощью JavaScript (и я не думаю, что это возможно):

• цветовой индекс
• сканирования
• Сетка

Более интересные вещи

• screen.availHeight= высота экрана минус функции интерфейса (например, панель задач)
• screen.availWidth= ширина экрана минус функции интерфейса (например, панель задач)
• Чтобы эмулировать медиа-запросы с помощью JavaScript, метод modiz(), но имейте в виду: если браузер не поддерживает медиа-запросы, не будет выполнять код вообще всегда будет возвращать false.

Источники

• width/height: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
• device-width/height: http://responsejs.com/labs/dimensions/
• ориентация: Обнаружение вращения Android-телефона в браузере с помощью JavaScript
• разрешение и цвет: http://www.javascriptkit.com/howto/newtech3.shtml
• монохромный: Javascript: обнаружение монохромного дисплея
• соотношение пикселей: http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html

Ответ 2

Запросы min-width: и max-width: запросы относятся к логическому окну (размер которого изменяется, когда пользователь меняет размер окна браузера), в то время как ширина min-device-width и max-device-width ( и ориентация:) запросы относятся к физическому экрану/видовому экрану (размер которого не изменяется после того, как оператор "meta... viewport..." исправил его).

В зависимости от вашей цели и аудитории вы можете найти альтернативный подход, более подходящий, чем Media Queries. Вы можете счесть полезным прочитать http://www.ckollars.org/alternative-to-media-queries.html