如何仅将Safari定位为Mac？

小编典典

如何仅将Safari定位为Mac？

css

嗨，我已经跨浏览器在所有可想到的PC浏览器（包括Safari）上固定了一个网站。现在，我的聪明驴设计师向我发送了在Mac上崩溃的整个布局的屏幕截图。我有一个解决方法（将元素的边距减少几个像素），但是我不知道如何仅针对Safari，最好仅针对Safari
mac。
最好的方法是什么？

阅读 385

2020-05-16

共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; }

感谢其他想法的答案，我已经尝试将所有内容打包成一个完整的解决方案。

2020-05-16