CODEWITHSUNDEEP
javascripthtmlresponsive-designmeta-tags
Thane
Thane

Reputation: 382

Viewport "initial-scale=1" meta tag zooms in when added with javascript

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?

Upvotes: 0

Views: 29

Answers (0)

Related Questions