Существует ли CSS-запрос для определения Windows? - PullRequest
Новая
       37

Существует ли CSS-запрос для определения Windows?

20 голосов
/ 13 декабря 2011

Я хочу указать два слегка отличающихся цвета фона, один для Mac OS, один для Windows.

Ответы [ 4 ]

24 голосов
/ 13 декабря 2011

Нет свойства для указания ОС, используемой для просмотра веб-страницы, но вы можете обнаружить ее с помощью javascript, вот несколько примеров для определения операционной системы: 

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

console.log('Your OS: '+OSName);

получил ?, теперь вы можете поиграть с document.write, чтобы написать таблицу стилей загрузки для конкретной операционной системы. :)

другой пример, я предположил, что вы используете jquery. 

if (navigator.appVersion.indexOf("Win")!=-1) 
{
  $(body).css('background','#333');
} else {
  $(body).css('background','#000'); // this will style body for other OS (Linux/Mac)
}
2 голосов
/ 29 мая 2014

доступно в последней версии Mozilla.

-moz-os-версия предоставляет следующие значения:

  • windows-xp
  • окна-Vista
  • окна-win7
  • окна-win8

поддержка ограничена https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

@media (-moz-os-version: windows-xp), (-moz-os-version: windows-vista),
(-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
    body{
        background-color: white;
    }
}
1 голос
/ 14 июня 2014

Старые версии Firefox также могут обнаруживать окна (для тех, кто не использует автообновление) и используют версию 4 или новее.Это более простой и не говорит о версии, только тот факт, что вы находитесь в Windows.Я создал этот для тестирования некоторое время назад, потому что мне было любопытно. 

@media screen and (-moz-windows-theme) {
    body {
        background-color: white;
    }
}

это также покрыто https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

0 голосов
/ 13 декабря 2011

В CSS это невозможно.В лучшем случае есть фильтр @media, поэтому вы можете ориентироваться на мобильные устройства по сравнению с настольными устройствами, но нет фильтра типа @os.

Этого можно добиться с помощью условных тегов IE: 

<link rel="stylesheet" href="everyone.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

Поместите специфичные для Mac стили в CSS для каждого, а затем переопределите все, что необходимо в версии IE.

Конечно, это не удастся, если вы получите пользователя, который использует (древний) IE для Macверсия, но должна охватывать всех современных пользователей.

...