Как настроить таргетинг на Mac с помощью CSS или Javascript - PullRequest
Новая
       2

Как настроить таргетинг на Mac с помощью CSS или Javascript

5 голосов
/ 28 февраля 2011

Мне нужно использовать определенные стили для Mac в моей таблице стилей. Каков наилучший способ сделать это?

Ответы [ 4 ]

7 голосов
/ 28 февраля 2011

В идеальном мире вам не нужно форкать стили для разных ОС. Однако иногда это требуется для конкретного дизайна, особенно с элементами стиля.

Если вам действительно нужно, следующий скрипт установит класс для элемента html: 

(function (flags, app) {
    os('Win', 'os-win');
    os('Mac', 'os-mac');

    if (document.documentElement) {
        document.documentElement.className += flags.join(' ');
    }

    function os (s, f) { if (app.indexOf(s) !== -1) flags.push(f); }

}([''], String(navigator && navigator.appVersion)));

Вы можете выполнить это в заголовке html, что означает, что страница не рендерится после начальной загрузки.

Затем вы можете использовать специфичные для Mac правила CSS следующим образом: 

.os-mac #my-element { ... }

Примечание. Лучше всего найти решение, не требующее разветвления для ОС.

4 голосов
/ 28 февраля 2011

или JavaScript 

if (navigator.userAgent.match(/Macintosh/))
    // do stuff for Macs here, such as load a stylesheet

Но на самом деле это плохая практика, и вы не должны этого делать.

1 голос
/ 22 октября 2013

Только для Mac: 

 <script>(function(e,t){function n(n,r){if(t.indexOf(n)!==-1)e.push(r)}n("Mac","os-mac");if(document.documentElement){document.documentElement.className+=e.join(" ")}})([""],String(navigator&&navigator.appVersion))</script>

Это работает как решение johnhunter, только то, что оно минимизировано.

1 голос
/ 28 февраля 2011

Свойство navigator.platform возвращает 'MacIntel' в OS X Safari, Chrome и Firefox (у меня под рукой нет блоков PPC).Если бы я это сделал, я бы проверил это и, вероятно, поместил бы класс с именем .mac в тег <BODY> и использовал бы его в качестве основы для специфических для Mac вещей.

...