0

I'm working in a legacy codebase where the existing web pages are not built in a mobile-responsive fashion. I am working on slowly migrating these web pages to be responsive, and I have come across a case where I need to switch to a responsive view some time after the page has already loaded. To accomplish this, I am using JavaScript to add the viewport meta tag.

I am encountering some unusual behavior where the initial-scale property is behaving as if it were slightly zoomed in. i.e., initial-scale=1 is behaving more like intial-scale=1.2. I have reproduced this behavior on https://google.com, you can do so with the following steps:

  1. Load the site, then in dev tools enable device emulation.
  2. In the console, execute the following: 
    const viewport = document.createElement("meta");
viewport.name = "viewport";
viewport.content = "initial-scale=1.0";
document.head.appendChild(viewport);
  3. The page will be slightly zoomed in: List item

I've already tried adding width=device-width, but that didn't change the behavior. Any ideas on how to prevent this?

Improve this question
Related questions
4
How to set the initial scale meta tag to fit body width?
0
meta tag viewport content width and initial scale having issues
3
Viewport meta tag in css
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.