1

我注意到媒体查询断点在 Chrome 与所有其他浏览器（IE9、Chrome、Opera）中的触发方式不同。

参考以下截图帮助解释（请忽略占位符图片）。首先，断点在 chrome 中：

在此处输入图像描述

现在，让我们看看下面所有其他浏览器的媒体查询触发位置。我们将使用 Firefox 作为示例，但对于 IE9 和 Opera 也是如此。

在此处输入图像描述

区别：

  1. 在 chrome 中，媒体查询的触发点在 1190px。在所有其他浏览器中，触发点位于 1173px。差异是 17 像素。

  2. 17px也是浏览器本身实际宽度的差值。我的意思是什么？我在 Chrome 和 Firefox 上触发媒体查询之前和之后的截图。在 Photoshop 中，我使两个浏览器的 jpg 图像的宽度保持一致。出于某种原因，媒体查询在除 Chrome 之外的所有浏览器中都会提前 17 像素触发。

实际的媒体查询 CSS 代码：

@media (min-width: 1190px) and (max-width: 1254px) {

    .visible-large {
        display: inherit !important;
    }

}


@media (max-width: 1189px) {

    .visible-large {
        display: none !important;
    }

}

我的问题：有没有办法让媒体查询在所有浏览器中同时触发？

4

2 回答 2

2

我认为某些浏览器可能会计算溢出宽度。

于 2013-02-15T14:46:16.113 回答
0

真正的区别在于基于 chrome 的浏览器考虑窗口/文档宽度的方式。在基于 chrome 的浏览器中，不考虑右侧滚动条的宽度（可能是因为移动浏览器必须这样做 - 移动浏览器中的滚动条是“虚拟的”并放置在文档的前面，而不是文档的宽度之外） .

据我所知，规范化跨浏览器媒体查询的文档到窗口宽度的唯一方法只能在 javascript 中完成，因为基于 chrome 的浏览器处理滚动条的方式，这有点否定了媒体查询首先带到 CSS 中。

于 2015-10-27T02:55:40.320 回答