如何仅定位Mac的Safari? [英] How to target Safari for Mac only?
问题描述
您好,我已经跨浏览器固定一个网站在所有可以考虑的电脑浏览器,包括Safari。
现在我的聪明的屁股设计师发送了一个截图在Mac上的整个布局的屏幕截图。
我有一个想法如何解决它(减少一个元素上的边距几个像素),但我不知道如何只针对Safari,最好只有Safari mac。
什么是
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?
推荐答案
这里有一个脚本可以包含在你的页面(或单独的js文件)将添加一个类到html元素,以便您可以添加safari-mac特定的css到您的css文件。
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);
示例css修复,可以在页面或外部css文件等:
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.
这篇关于如何仅定位Mac的Safari?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!