发表新帖
发表新帖

How to target Safari for Mac only?

后端 未结
关注
10 1871
终归单人心
终归单人心 2020-12-05 05:39

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

相关标签:
10条回答
  • 一个人的身影
    2020-12-05 06:18

    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 */ }
    0 讨论(0)
  • 伪装坚强ぢ
    2020-12-05 06:20

    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.

    0 讨论(0)
  • 遥遥无期
    2020-12-05 06:21

    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>

    0 讨论(0)
  • 太阳男子
    2020-12-05 06:22

    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`
    0 讨论(0)
 看不清?
提交回复
热议问题