Как настроить таргетинг только на Safari для Mac? - PullRequest
Новая
       1

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

15 голосов
/ 15 мая 2010

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

Ответы [ 9 ]

25 голосов
/ 13 апреля 2012

Вот скрипт, который вы можете включить на своей странице (или в отдельный файл js), который добавит класс к элементу html, чтобы вы могли добавить специфичные для safari-mac css в ваш файл 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; }

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

4 голосов
/ 30 мая 2015

Используя решение @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 голосов
/ 21 мая 2015

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

Вот вывод navigator.vendor

Safari на iPad

Mozilla / 5.0 (iPad; CPU OS 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:)

4 голосов
/ 15 мая 2010

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

В браузере Mac будет строка «Mac OS X 10». в строке агента пользователя.

3 голосов
/ 18 ноября 2011

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

if (navigator.userAgent.indexOf('Mac') >= 0) {
  $(element).addClass('mac_os')
}
// targets macs only`
2 голосов
/ 15 мая 2010

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

Также: Вы уверены, что Safari для Mac и Safari для Windows визуализируют одну и ту же страницу по-разному?

0 голосов
/ 14 марта 2013

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

/*\*/
  .some-class {
    /* Here comes some options */
  }
/**/
0 голосов
/ 01 ноября 2012

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

<?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>

0 голосов
/ 19 апреля 2012 
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /* Add your Safari-specific styles here. */
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...