Как настроить Safari только для Mac?

Привет, я перекрестно браузера исправил сайт на всех мыслимых ПК-браузерах, включая Safari. Теперь мой дизайнер умных задницей отправил мне снимок экрана всего макета, рушившегося на Mac. У меня есть идея, как его решить (уменьшите маржу на элементе на несколько пикселей), но я не знаю, как настроить только Safari, предпочтительно только Safari.
Какой лучший способ сделать это?

Ответы

Ответ 1

Здесь script, который вы можете добавить на свою страницу (или в отдельный файл js), который добавит класс в элемент html, чтобы вы могли добавить специальный CSS-код Safari-mac в ваш файл css.

(function($){
    // console.log(navigator.userAgent);
    /* Adjustments for Safari on Mac */
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Mac') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
        // console.log('Safari on Mac detected, applying class...');
        $('html').addClass('safari-mac'); // provide a class for the safari-mac specific css to filter with
    }
})(jQuery);

Примеры исправлений css, которые могут быть на странице или в вашем внешнем файле css и т.д.:

/* Safari Mac specific alterations
 * (relies on class added by js browser detection above),
 * to take into account different font metrics */
.safari-mac #page4 .section p.fussyDesigner { margin-right: -15px; }
.safari-mac #page8 .section-footer { width: 694px; }

Благодаря другим ответам на идеи, я попытался вложить все это в полное решение в этом ответе.

Ответ 2

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

У Mac-браузера будет строка "Mac OS X 10.". в строке пользовательского агента.

Ответ 3

Исходя из решения @Tim Abell, вы можете использовать аналогичный подход для получения классов для всех основных платформ и браузеров для более широкого обнаружения и гибкости.

Этот фрагмент добавит класс для имени браузера, а другой для имени платформы в элемент <html>. Так, например, Safari на Mac окажется <html class="safari mac">.

Javascript/JQuery

//Search for keywords within the user agent string.  When a match is found, add a corresponding class to the html element and return.  (Inspired by http://stackoverflow.com/a/10137912/114558)
function addUserAgentClass(keywords) {
  for(var i = 0; i < keywords.length; i++) {
    if(navigator.userAgent.indexOf(keywords[i]) != -1) {
      $("html").addClass(keywords[i].toLowerCase());
      return; //Once we find and process a matching keyword, return to prevent less "specific" classes from being added
    }
  }
}

addUserAgentClass(["Chrome", "Firefox", "MSIE", "Safari", "Opera", "Mozilla"]); //Browsers listed generally from most-specific to least-specific
addUserAgentClass(["Android", "iPhone", "iPad", "Linux", "Mac", "Windows"]); //Platforms, also in order of specificity

При таком подходе вы можете делать такие вещи, как:

CSS

.safari { /* Safari only */ }
.mac { /* Mac only */ }
.safari.mac { /* Safari Mac */ }
html:not(.safari) { /* All browsers except for Safari */ }
html:not(.safari.mac) { /* All browsers except for Safari Mac */ }

Ответ 4

Рад, что я нашел эту страницу, я чувствую вашу боль в любое время, когда вы используете дополнение с основанной на шрифтах навигацией или вкладками, которые вы используете в этих проблемах Mac/PC, потому что они визуализируют шрифты по-разному.

if (navigator.userAgent.indexOf('Mac') >= 0) {
  $(element).addClass('mac_os')
}
// targets macs only`

Ответ 5

Я думаю, что выбранный правильный ответ устарел и теперь не работает.

Вот результат navigator.vendor

Safari на iPad

Mozilla/5.0 (iPad, ОС ОС 8_3, как Mac OS X) AppleWebKit/600.1.4 (KHTML, как и Gecko) Версия /8.0 Mobile/12F69 Safari/600.1.4

Safari на Mac

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.2.5 (KHTML, например, Gecko) Версия /8.0.2 Safari/600.2.5 Safari/600.1.4

Как вы можете видеть, Mac отображается в navigator.vendor обоих сценариев.

Вот моя версия

var isSafariMac = /Safari/.test(navigator.userAgent) && 
                  !/Mobile/.test(navigator.userAgent) && 
                  /Apple Computer/.test(navigator.vendor);

Итак, вы можете использовать это для настройки Safari на Mac:)

Ответ 6

Вероятно, вам нужно запустить регулярный запрос с User-Agent и выборочно загрузить файл CSS только для Safari для Mac.

Также: Вы уверены, что Safari для Mac и Safari для Windows делает ту же страницу сильно отличающейся?

Ответ 7

@media screen and (-webkit-min-device-pixel-ratio:0) {
     /* Add your Safari-specific styles here. */
}

Ответ 8

Пример предоставления динамических стилей для разных браузеров:

<?php
$str = $_SERVER['HTTP_USER_AGENT'];
$pos1 = strpos($str, "Safari");
$pos2 = strpos($str, "Chrome");
$pos3 = strpos($str, "MSIE");
$pos4 = strpos($str, "Firefox");

if($pos1 != '' && $pos2 == '')           // Safari
$style = "width:200px; height:100px;";
else if($pos2 != '')                     // Chrome
$style = "width:180px; height:90px;";
else if($pos3 != '')                     // IE
$style = "width:180px; height:90px;";
else if($pos4 != '')                     // Firefox
$style = "width:180px; height:90px;";
?>

<div style="<?php echo $style; ?>">Hello world</div>

Ответ 9

Используйте это в css. он будет отображаться только в Safari

/*\*/
  .some-class {
    /* Here comes some options */
  }
/**/