我试图找到一种方法来应用CSS只是Safari,但我发现一切也适用于Chrome。我知道这些目前都是WebKit浏览器,但我有问题的div对齐在Chrome和Safari;它们的显示方式不同。

我一直在尝试使用这个,但它也会影响Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  #safari { display: block; } 
} 

有人知道另外一个只适用于Safari的吗?


当前回答

最后,我使用了一点JavaScript来实现它:

if (navigator.vendor.startsWith('Apple'))
    document.documentElement.classList.add('on-apple');

然后在我的CSS目标苹果浏览器引擎的选择器将是:

.on-apple .my-class{
    ...
}

其他回答

注意:如果只支持ios就足够了(如果你愿意牺牲Safari桌面),那么这是可行的:

    @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
    }

嗨,我做了这个,它为我工作

@media(max-width: 1920px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 5.5% !important;
        }
    }
}

@media(max-width: 1680px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 15% !important;
        }

    }
}

@media(max-width: 1600px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 18% !important;
        }

    }
}


@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 24.5% !important;
        }

    }

}


@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
    @media {
        .photo_row2 {
            margin-left: -11% !important;
        }

    }

}

当使用这个Safari专用过滤器时,我可以针对Safari (iOS和Mac),但排除Chrome(和其他浏览器):

@supports (-webkit-backdrop-filter: blur(1px)) {
  .safari-only {
    background-color: rgb(76,80,84);
  }
}

https://www.bram.us/2021/06/23/css-at-supports-rules-to-target-only-firefox-safari-chromium/#safari

@supports (background: -webkit-named-image(i)) {
// 
}

{后h1:: 内容:“不”; margin-left: .3em; 颜色:红色; } @supports (background: -webkit-named-image(i)) { {后h1:: 内容:“是的”; 颜色:绿色; } } <!DOCTYPE html > < html > < >头 < meta charset = " utf - 8 " > <meta name="viewport" content="width=device-width"> <标题> JS本< /名称> > < /头 身体< > <标题>旅行吗?< / h1 > 身体< / > < / html >

顺便说一下,对于那些只需要在移动设备上使用Safari的人来说,只需在这个黑客中添加一个媒体查询:

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding: 10px; //or any property you need
    }
}

别忘了把.safari_only类添加到你想要的目标元素中,例如:

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari  </div>