Disable Internet Explorer 11 Auto Scaling Zoom to Viewport Width - IE11

Question

Is there any way to prevent the "auto zoom to viewport width" (a.k.a. automatic scaling) feature in Internet Explorer 11?

I want to force the browser to follow my max-width rule and prevent it from auto-scaling the page contents to the full width of the viewport.

I'm seeing the issue in IE11 on Surface Pro 2 in both "desktop" and "metro" modes. The issue is discussed here and may be related to external displays, although I'm experiencing it with or without an external display attached, and the zooming occurs on both the Surface monitor and on external displays.

This page in the Microsoft docs suggests you can opt out of "automatic scaling" using this CSS rule:

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

But that's not working for me; all it does it hide the vertical scrollbar by default. Pages still zoom to the full width of the viewport, ignoring any max-width values set in the CSS.

Here's what it says in the 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.

What I'm experiencing is actually the opposite of what the docs say. When the viewport is wider than 1024 pixels, content is automatically scaled.

--

Here's what I have set for my meta viewport tag:

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

Answer 1

media screen may not be triggered by the Surface . You should either remove it from te media query or adjust the query with only.

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

Further:

• @-ms-viewport rule
• Media Queries