css - 禁用 Internet Explorer 11 自动缩放缩放至视口(viewport)宽度 - IE11

Question

有什么方法可以阻止 Internet Explorer 11 中的“自动缩放至视口(viewport)宽度”(也称为自动缩放)功能？

我想强制浏览器遵循我的 max-width 规则，并防止它自动将页面内容缩放到视口(viewport)的整个宽度。

我在“桌面”和“地铁”模式下的 Surface Pro 2 上的 IE11 中看到了这个问题。讨论的问题here并且可能与外部显示器有关，尽管我在连接或不连接外部显示器的情况下都遇到过它，并且缩放发生在 Surface 显示器和外部显示器上。

这page在 Microsoft 文档中建议您可以使用此 CSS 规则选择退出“自动缩放”:

@media screen {
    @-ms-viewport {
        width: device-width;
    }
}

但这对我不起作用；它所做的一切默认情况下隐藏垂直滚动条。页面仍然缩放到视口(viewport)的整个宽度，忽略 CSS 中设置的任何 max-width 值。

这是它在 docs 中所说的内容:

By default, the Internet Explorer in the new Windows UI automatically scales content when the window is narrower than 1024 pixels. This primarily includes the snapped state and portrait mode.

However, in cases where this automatic scaling is not needed or desired, the device-width keyword can be used. This keyword signifies that the page is optimized to work well regardless of the width of the device.

我遇到的情况实际上与文档所说的相反。当视口(viewport)宽超过 1024 像素时，内容会自动缩放。

--

这是我为元视口(viewport)标签设置的内容:

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

Answer 1

media screen 可能不会被 Surface 触发。您应该将其从媒体查询中删除或使用 only 调整查询。

@media only screen {
    @-ms-viewport { width: device-width; }
}

进一步:

• @-ms-viewport rule
• Media Queries