Ответ 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