Как на CSS media-query определить Windows. Этого сделать нельзя! Но сегодня расскажу вам как сделать это максимально удобно, и «поддерживаемо» с точки зрения CSS.

Как на CSS media-query определить Windows?

Способ очень простой. Суть его в том, чтобы на JS, в случае, если используется Windows добавлять специальный класс в тэг body, который можно будет использовать в CSS для исправления багов, или специализации контента под операционную системы.

Итак сначала нужно научится определять, что мы имеем дело именно с Windows. Для этого нужно попробовать поискать в строке navigator.appVersion подстроку Win.

navigator.appVersion.indexOf("Win")

Navigator – это глобальная переменная с данными о браузере.

И в случае, если она найдена (подстрока), то добавить в тэг body понятный нам класс, например is_windows.

if (navigator.appVersion.indexOf("Win")!=-1){
document.getElementsByTagName('body')[0].className+=' is_windows';
}

Как видите, здесь мы говорим, что если подстрока Win не равна -1 (то есть присутсвует в строке), то нужно в document найти тэг body и расширить его атрибут className текстом » is_windows», именно расширить, потому, что мы не знаем точно, будет ли этот класс у body единственным, или дополнит уже существующие.

Всё. Код нужно поместить в любом месте страницы (желательно в самом конце), внутрь тэгов script. Будет работать без каких-либо фреймворков типа jquery или zepto, не будет конфликтовать с ними, если они используются.

В CSS теперь можно строить собсвтенные свойства для Windows, в таком виде:

.is_windows div{
background: red;
}

И только на Windows все div будут красными.

Профит.