CSS 如何仅针对 Mac 的 Safari？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2838664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to target Safari for Mac only?
提问by Moak
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?
嗨，我已经跨浏览器修复了所有可以想象的 PC 浏览器（包括 Safari）上的站点。现在我聪明的设计师给我发了一张整个布局在 mac 上折叠的屏幕截图。我知道如何解决它（将元素的边距减少几像素），但我不知道如何仅针对 Safari，最好仅针对 Safari mac。
做到这一点的最佳方法是什么？
回答by Tim Abell
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.
这是您可以在页面（或单独的 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);
Example css fixes, which can be in page or in your external css file etc:
示例 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; }
Thanks to other answers for ideas, I've tried to wrap everything up into a complete solution in this answer.
感谢其他想法的答案，我试图在这个答案中将所有内容都打包成一个完整的解决方案。
回答by Mantas Vidutis
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.
Mac 浏览器将包含字符串“Mac OS X 10”。在用户代理字符串中。
回答by eric.chenchao
I think the selected right answer is outdated and does not work now.
我认为选择的正确答案已经过时，现在不起作用。
Here is the output of navigator.vendor
这是输出 navigator.vendor
Safari on iPad
iPad 上的 Safari
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
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
Mac 上的 Safari
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
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 Macappears in navigator.vendorof both scenarios.
如您所见，这两种情况都Mac出现了navigator.vendor。
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:)
所以你可以用它来定位 Mac 上的 Safari :)
回答by rinogo
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.
基于@Tim Abell 的解决方案，您可以使用类似的方法获取所有主要平台和浏览器的类，以实现更广泛的检测和灵活性。
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">.
此代码段将为<html>元素添加一个用于浏览器名称的类和另一个用于平台名称的类。因此，例如，Mac 上的 Safari 最终会是<html class="safari mac">.
Javascript/jQuery
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
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 */ }
回答by James Daly
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.
很高兴我找到了这个页面，每当您使用基于字体的导航或标签填充时，我都会感到您遇到这些 Mac/PC 问题，因为它们呈现不同的字体。
if (navigator.userAgent.indexOf('Mac') >= 0) {
$(element).addClass('mac_os')
}
// targets macs only`
回答by Mitch Dempsey
You probably need to run a regex query against the User-Agent and selectively load a CSS file just for Safari for Mac.
您可能需要针对 User-Agent 运行正则表达式查询，并有选择地加载仅用于 Mac Safari 的 CSS 文件。
Also: Are you sure that Safari for mac and safari for windows render the same page drastically different?
另外：您确定 Safari for mac 和 safari for windows 呈现完全不同的同一页面吗？
回答by Sanjay Tiwari
for this question i have solution with the help of CSS, please find the below code fixes..
对于这个问题，我在 CSS 的帮助下有解决方案，请找到以下代码修复..
/* 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.
请在 .scss 文件中尝试此操作。
回答by John
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Add your Safari-specific styles here. */
}
回答by shasi kanth
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>
<div style="<?php echo $style; ?>">Hello world</div>
回答by Andriy
Use this in css. it will be rendered only in Safari
在 css 中使用它。它只会在 Safari 中呈现
/*\*/
.some-class {
/* Here comes some options */
}
/**/
