Question

您好我已经跨浏览器在所有可以想象的PC浏览器上修复了一个网站，包括Safari。现在我的智能屁股设计师给我发了一个屏幕截图，整个布局在mac上崩溃了。我知道如何解决它（将元素上的边距减少几个像素），但我不知道如何仅针对Safari，最好只使用Safari mac。最好的方法是什么？

Answer 1

以下是您可以在页面上（或在单独的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; }

感谢其他想法的答案，我试图在这个答案中将所有内容整理成一个完整的解决方案。

Answer 2

用户代理字符串包含操作系统信息，您可能已经在检查浏览器类型的用户代理字符串。

mac浏览器的字符串为“Mac OS X 10”。在用户代理字符串中。

Answer 3

在@Tim Abell的解决方案的基础上，您可以使用类似的方法为所有主要平台和浏览器获取类，以获得更广泛的检测和灵活性。

此代码段将为浏览器名称添加一个类，为平台名称添加另一个类到<html>元素。因此，例如，Mac上的Safari最终会成为<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 */ }

Answer 4

很高兴我找到了这个页面，当你使用填充基于字体的导航或者你遇到这些Mac / PC问题的标签时，我感到很痛苦，因为它们以不同的方式渲染字体。

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

Answer 5

我认为所选的正确答案已过时，现在不起作用。

以下是navigator.vendor

的输出

iPad上的Safari

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

Mac上的Safari

Mozilla / 5.0（Macintosh; Intel Mac OS X 10_10_1）AppleWebKit / 600.2.5 （KHTML，与Gecko一样）Version / 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);

所以你可以用这个来定位Mac上的Safari：）

Answer 6

您可能需要针对User-Agent运行正则表达式查询，并选择性地仅为Safari for Mac加载CSS文件。

另外：您确定用于Mac的Safari和Safari的Safari会使同一页面显着不同吗？

Answer 7

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

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

Answer 9

对于这个问题，我在CSS的帮助下有解决方案，请找到以下代码修复程序。.

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
      .classname{
        padding: 1px 0px; // css styles
      }
  }
}

请在.scss文件中尝试此操作。

Answer 10

在css中使用它。它只会在Safari中呈现

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

如何仅针对Mac的Safari？

10 个答案: