Force mobile browser zoom out with Javascript

Question

In my web app, I have some thumbnails that open a lightbox when clicked. On mobile, the thumbnails are small and the user typically zooms in. The problem is that when they click to play it, the lightbox is outside of the viewable area (they have to scroll to the lightbox to see the video). Is it possible to force a mobile browser to zoom out so they can see the whole page?

Making the page more responsive is not an option right now; it is a fairly large web application and it would take a huge amount of time to refactor.

Answer 1

Dug through a lot of other questions trying to get something to zoom out to fit the entire page. This question was the most relevant to my needs, but had no answers. I found this similar question which had a solution, although implemented differently, and not what I needed.

I came up with this, which seems to work in Android at least.

1. initial-scale=0.1: Zooms out really far. Should reveal your whole website (and then some)
2. width=1200: Overwrites initial-scale, sets the device width to 1200.

You'll want to change 1200 to be the width of your site. If your site is responsive then you can probably just use initial-scale=1. But if your site is responsive, you probably don't need this in the first place.

function zoomOutMobile() {
  var viewport = document.querySelector('meta[name="viewport"]');

  if ( viewport ) {
    viewport.content = "initial-scale=0.1";
    viewport.content = "width=1200";
  }
}

zoomOutMobile();

Answer 2

Similar to Radley Sustaire's solution I managed to force unzoom whenever the device is turned in React with

  zoomOutMobile = () => {
    const viewport = document.querySelector('meta[name="viewport"]');

    if ( viewport ) {
      viewport.content = 'initial-scale=1';
      viewport.content = 'width=device-width';
    }
  }

and inside my render

this.zoomOutMobile();

1 edge case I found was this did not work on the Firefox mobile browser