How to target Safari for Mac only?_问答_开发者

Hi I开发者_开发知识库've cross browser fixed a site on all thinkable PC browsers, including Safari. Now my smart ass designer sent me a screen shot of the whole layout collapsing on mac. I have an idea how to solve it (reduce the margin on an element by a few pix), but i don't know how to target Safari only, preferably Safari mac only.

What's the best way to do this?

Here's a script you can include on your page (or in a separate js file) that will add a class to the html element so that you can add safari-mac specific css to your css file.

(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);

Example css fixes, which can be in page or in your external css file etc:

/* 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; }

Thanks to other answers for ideas, I've tried to wrap everything up into a complete solution in this answer.

The user agent string contains operating system information, and you are probably already checking the user agent string for the browser type.

A mac browser will have the string "Mac OS X 10." in the user agent string.

I think the selected right answer is outdated and does not work now.

Here is the output of navigator.vendor

Safari on iPad

Mozilla/5.0 (iPad; CPU OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12F69 Safari/600.1.4

Safari on Mac

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.2.5 (KHTML, like Gecko) Version/8.0.2 Safari/600.2.5 Safari/600.1.4

As you can see Mac appears in navigator.vendor of both scenarios.

Here is my version

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

So you can use this to target Safari on Mac:)

Building off of @Tim Abell's solution, you can use a similar approach to get classes for all of the major platforms and browsers for broader detection and flexibility.

This snippet will add a class for the browser name and another for the platform name to the <html> element. So, for example, Safari on Mac would end up being <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

With this approach, you can do things like:

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 */ }

Glad I found this page, I feel your pain anytime you use padding with font based navigation or tabs you run into these Mac/PC issues because they render fonts differently.

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

You probably need to run a regex query against the User-Agent and selectively load a CSS file just for Safari for Mac.

Also: Are you sure that Safari for mac and safari for windows render the same page drastically different?

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

An example of providing dynamic styles for various browsers:

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

for this question i have solution with the help of CSS, please find the below code fixes..

/* Safari 10.1+ */

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

Please try this in .scss file.

Use this in css. it will be rendered only in Safari

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

How to target Safari for Mac only?

精彩评论

关注公众号

热门标签

图文推荐

How to target Safari for Mac only?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：