Является ли max-device-width ссылкой на document.body.clientWidth?

В мультимедийных запросах я видел max-width, min-width, max-device-width и min-device-width и orientation.

С точки зрения JavaScript, относятся ли они к document.body.clientWidth? Или window.outerWidth? Также я вижу, что есть document.body.offsetWidth.

Есть ли там ресурс, который перечисляет все допустимые параметры запроса css media вместе с атрибутами JavaScript, которые соответствуют им?

Ответ 1

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

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


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

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

Я нашел:


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

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 (и я не думаю, что это возможно):

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

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


Источники

Ответ 2

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

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