Safari浏览器的媒体查询

Question

Safari浏览器的媒体查询

4

我希望媒体仅在1280像素屏幕上在Safari浏览器中工作。

这适用于所有浏览器，但我只想在Safari中使用。

@media screen and (width: 1280px){


}

- Nikita Kurilovic

3个回答

0

最好的选择是使用JavaScript：

以下是一个代码片段，可以尝试进行此检测。

if (navigator.userAgent.toLowerCase().indexOf('safari/') > -1 && screen.width=="1280px") {
  console.log("True")
}else {
  document.getElementById("a").display = "none"
  console.log("False")
}

<html>
  <head></head>
  <body>
    <p id="a">Safari mobile<p>
  </body>
</html>

我不知道如何在CSS中判断媒体类型是否为屏幕。

- Pablo-No

1

最好使用这种方法，CSS是样式表，不适用于OP所需的方法。 - Oliver Heward

1

完全同意 @OliverHeward 。 - Pablo-No

让编程语言处理那些东西，把 CSS 留给它最擅长的事情哈哈 :) - Oliver Heward

-10

试试这个：

@media only screen and (width: 1280px) {


}

- NIMV

1

您的答案目前被标记为低质量并面临删除。请确保您的答案除了代码之外还包含解释。 - Tim Stack

这适用于任何浏览器。 - LaFllamme

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lahiru Supunchandra · Accepted Answer

试试这个

Webkit浏览器：Chrome和Safari（任何版本）

@media screen and (-webkit-min-device-pixel-ratio:0) { 
property: value;}

Chrome 29+

：谷歌浏览器版本29及以上。

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.chrome {
    property: value;
}}

Safari（7.1+）

_::-webkit-full-page-media, _:future, :root .safari_only {
property: value;}

Safari（从6.1到10.0）

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
@media {
    /* Your Class */
}}

Safari（10.1+）

@media not all and (min-resolution:.001dpcm) { 
@media {
    /* Your Class */
}}

有用的链接：针对不同浏览器的CSS和JavaScript技巧