媒体查询在 IE11 中不起作用（解决问题）答案

【问题标题】：Media Queries not working in IE11 (Resolution problem)媒体查询在 IE11 中不起作用（解决问题）
【发布时间】：2019-07-03 15:19:22
【问题描述】：

我在 CSS 中使用媒体查询来根据 IE11 和 Chrome 的屏幕分辨率来缩放我的网页。当我在 2 个不同屏幕上的 chrome 上运行 this webpage 时（顺便说一句，我用它来确定我的最小宽度），我在小屏幕上得到 1366x768，在大屏幕上得到 1920x1080。当我在 IE11 的两个屏幕上运行相同的网页时，两者的分辨率均为 1920x1080。这意味着我使用的媒体查询将不适用于 IE，因为宽度为 1920。我能做些什么来解决这个问题？

.sizing{

 }

@media all and (max-width: 1366px) {
  .sizing{
    zoom: 0.65;
    -moz-transform: scale(0.85);
  }
}

目前它只能在 chrome 中缩放，但不能在 IE 中缩放。

【问题讨论】：

你在缩放什么？您使用的工具是否准确？它会为两个不同的屏幕报告相同的分辨率是没有意义的。我知道这很难知道，但您是否尝试过其他类似 mydevice.io 的工具，看看您是否得到相同的结果？您检查屏幕分辨率的具体屏幕/设备是什么？ 即使解决报告是准确的，它也应该是一个问题。这与在大屏幕上查看您网站的人的区别相同。
好的，我刚刚使用了你给我的工具，现在它在较小的屏幕上显示了 1366px 宽度的逻辑分辨率。但是，根据之前在互联网上提出的问题，我的媒体查询应该在 IE 上工作。你认为这可能是什么原因造成的？谢谢
您可能需要为 IE11 的 CSS 属性 zoom 添加前缀，即 -ms-zoom。但是，如果 zoom 与 transform: scale(); 的作用相同，请使用它而不使用前缀。使用caniuse.com 快速搜索和检查浏览器对 CSS、JS 和 Web API 的兼容性。 注意：目前 caniuse.com 存在一些问题（不是典型的），并且没有显示给定浏览器的一些例外情况。

标签： css internet-explorer-11

【解决方案1】：

根据browser compatibility 文档，IE 不支持-moz-transform。您应该改用transform。您可以尝试像这样修改css：

@media all and (max-width: 1366px) {
  .sizing{
    zoom: 0.65;
    transform: scale(0.85);
    -moz-transform: scale(0.85);
  }
}

【讨论】：