Turn off the automatic resizing of Internet Explorer 11 to fit the width of the viewport - IE11

Is there a way to stop Internet Explorer 11 from automatically zooming to fit the viewport width?

I need the browser to respect my max-width rule and not scale the content to fill the entire width of the viewport on its own.

This issue is happening in IE11 on Surface Pro 2, both in "desktop" and "metro" modes. The problem is mentioned here and could be linked to external displays. However, I am experiencing it regardless of external display connection, with zooming occurring on both the Surface monitor and external displays.

The Microsoft documentation page suggests using this CSS rule to opt-out of automatic scaling:

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

Unfortunately, this solution does not work for me as it only hides the vertical scrollbar by default. The pages still zoom to fill the full width of the viewport, disregarding any max-width values set in the CSS.

The documentation states:

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

In cases where automatic scaling is not desired, the device-width keyword can be used. It indicates that the page is designed to work well regardless of the device's width.

However, my experience contradicts this information. Content is automatically scaled when the viewport is wider than 1024 pixels.

--

Here is how my meta viewport tag is currently set:

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

Answer №1

media screen might not work properly on the Surface device. Consider removing it from the media query or modifying the query to include only.

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

Learn More:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In Internet Explorer, regardless of how much scrolling occurs, the document.body.scrollTop property will consistently be

While moving the mouse, I'm showing the value of document.body.scrollTop in the status bar. However, I have noticed that this value is consistently 0 in Internet Explorer. Why is it always 0 in IE? Is there an alternative method to determine how far t ...

Styling using CSS is effective only when applied locally, as it does not function properly on GitHub Pages

Although I have come across similar questions to the one I am facing, none of the solutions provided seem to work for me at the moment. My CSS file loads and functions as expected when tested locally, but once I upload it to GitHub, it stops working. In my ...

Organized Styled-components

Considering implementing styled-components in my application and questioning the best organizational approach. Usually, styled-components are associated with a particular component for increased reusability. However, what is the recommended method for us ...

Adding a see-through Bootstrap Navbar to a Fullpage.js website: A step-by-step guide

I am trying to incorporate a transparent Bootstrap Navbar into my page that is using fullpage.js. The desired outcome is for the navbar to stay on top of the page without affecting the layout of the website content. I have referenced an example here, but ...

The design breaks occur exclusively in the Android default browser

I am experiencing issues with the design of a nested div element when viewed in the default Android browser. Unfortunately, I don't have access to tools that would allow me to identify the cause of this problem. However, the design functions correctly ...

Tips for maintaining the footer at the bottom of the page regardless of the screen size

In my current project, I am dealing with several web pages. For each page, I have arranged three div tags: Header Body (content) Footer The issue arises when it comes to the body div tag, which houses the main content of a page such as forms and descrip ...

Tips on positioning a div based on the screen dimensions

In my table, there is an icon that reveals a chart as a popup when hovered over. This div is where the chart is displayed: <div id="chart-outer" style="@style" class="popup-chart close"> <h2 id="charttitle&q ...

Having trouble displaying images on iPhone 6

I am facing an issue with the background image of one of my elements. The image loads perfectly on most devices such as iPhone 5, iPhone 5c, and Samsung Galaxy, but it does not load on iPhone 6, iPhone 6 Plus, and some iPads. Can anyone provide insights ...

Tips for customizing the appearance of an HTML5 progress bar using JQuery

Here is my method for obtaining the bar: let bar = $('#progressbar'); Styling and animating it is no problem, using either of these methods: bar.css(...) bar.animate(...) However, I am wondering how to adjust the CSS specifically for the prog ...

Updating form validation by altering input value

I'm currently utilizing JavaScript regular expressions for form validation in my project. After successfully completing the validation without any errors, upon clicking the submit button, I want the form to be submitted and change the submit value to ...

Challenge with Making Backgrounds Responsive on Android Chrome

I’m facing an issue with the responsive background on Android Chrome. It displays correctly on PC browsers like Safari, Firefox, and Opera, as well as in Firefox on Android. However, I am encountering a problem with Chrome on Android where it doesn’t a ...

Can you identify the attribute used for marking up an HTML code tag?

While examining a website's code to understand how they styled a specific section of their page, I came across the following snippet: <code markup="tt"> I thoroughly checked for any other references to this particular markup attribute ...

Another class is overriding the border of the text-box

I'm facing a challenge in customizing the material ui css. Specifically, I want to set the border color of a textbox to red. The issue arises when the bottom border gets overwritten. Upon investigation, I discovered that the culprit is the class MuiIn ...

jQuery UI Sortable: Efficiently Drag Items Across Multiple Interconnected Lists

One feature of using jQuery UI Sortable is the ability to make the sortable item container scroll when an item is dragged. This can be achieved by specifying the scroll option. In my case, I have several sortable lists that are connected within separate c ...

Enhance your table layout with Bootstrap 3 by adjusting textarea size to fill

I am currently in the process of developing a forum and bulletin board software. I am facing some challenges while trying to integrate a reply section into the thread page. You can view what I have implemented so far here. Html: <div class="panel pane ...

Issue with Bootstrap 5 Carousel not transitioning between slides

I am trying to add a carousel to my webpage, but it seems like it's not sliding and only displaying the first image. I've double-checked my code and everything else from Bootstrap works fine. Here's the snippet of code I'm using: < ...

Tips for aligning two canvases with different heights at the top in HTML5

My problem involves two canvases housed within a single <div>. Despite their different heights, they are currently aligned at the bottom. +-------+ + + +-------+ + + + + + + +-------+ +-------+ Is the ...

Issue with scroll animation across multiple div elements

I am working on a project where I have two main divs, one with the id of "left-div" and the other with the id of "right-div". In the "left-div", there are multiple nested divs each with their own unique id. The overflow-y property of the "left-div" is set ...

The footer moves upwards when a file is downloaded

I am facing an issue with my website footer and its CSS styling. #footer { position: absolute; bottom: 0; width: 100%; height:8rem; } The main goal is to keep the footer at the bottom of the page, regardless of the amount of content on th ...

Adjust the borderBottomColor of Material-UI TextField upon completion of input

When working with MUI to create a form, I noticed that the default TextField bottom border is grey, turns blue when focused, and then back to grey when focus is lost. My goal is to prevent it from losing the blue color after filling in the field: https:// ...