css 媒体查询在Safari中不起作用，但在IE、Firefox和Chrome中起作用

nfg76nw0 于 2023-02-01 发布在其他

关注(0)|答案(3)|浏览(214)

我有一个相当奇怪的错误，我真的不能找出我做错了什么。
目前我正在做一个带有媒体查询的响应网站项目。经过几周的工作，我才意识到我的媒体查询不能在Safari中工作，而是在其他任何地方。
我的CSS的一些例子

@media (max-width: 1138px) {
  .column-2 {max-width: 32.4%;}
}

@media (max-width: 950px) { 
  .column-2, .column-1 {
    max-width: 17.9%;border-left:1px solid #e5e5e5;
  }
}

@media (max-width: 640px) {
  .column-2, .column-1 {
    max-width:100%; 
    border-bottom:1px solid #e5e5e5; 
    height:20%; 
    width: 91%;
  } 
  footer div.left, footer div.right {
    width:100% !important;
  }
}

在HTML标题部分添加了视口

<meta name="viewport" content="width=device-width, initial-scale=1">

我也试过@media screen only and (...) {}，还是不行。
知道我哪里做错了吗？

css

来源：https://stackoverflow.com/questions/24084044/media-queries-not-working-in-safari-but-in-ie-firefox-and-chrome

3条答案

按热度按时间

cl25kdpy1#

第一个断点缺少“max-width：”后面的右括号32.4%"。

赞(0）回复(0）举报 2023-02-01

hgncfbus2#

我不确定这是不是解决问题的方法，但看起来你在“32.4%”后面缺少了一个右括号，可能还有媒体查询的“屏幕”部分。你没有定义媒体查询处理的范围。下面是我在一个网站上写的一个媒体查询示例（http://bonjourproject.com/）：

@media screen and (max-width: 600px) {  
     .bottom {
    width: 400px;
  }
}

一定要添加“屏幕和”，看看这是否适合你。
注意：“屏幕”不是唯一的选项这里有很多更多的选择，但“屏幕”是相当常见的。让我知道如果这工作！

赞(0）回复(0）举报 2023-02-01

dxxyhpgq3#

没有看到你的css/html的完整堆栈，有很多可能性为什么会发生这种情况，但由于它的工作在其他浏览器，而不是iOS去尝试添加这只是为了测试，看看Safari是否拿起它：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* put webkit CSS here*/
}

如果仍然没有什么，那么你需要检查你的html头语法和css标签，确保没有错字...尝试使用控制台。这将至少帮助我/每个人的数字，你需要什么其他步骤。正如我提到的尝试添加一些基本的小提琴为我们。

赞(0）回复(0）举报 2023-02-01

我来回答

css 媒体查询在Safari中不起作用，但在IE、Firefox和Chrome中起作用

3条答案

相关问题

热门标签

最新问答