Altering meta viewport tag

Question

I need to alter the meta viewport tag dependent upon the width of the visual viewport. I know HOW to do it but it's not working, I think it's because the site is running that bit of JS too late for it to take effect. It may not be this but this is my first thought.

In my application.js file:

$(document).ready(function() {

  // If screen width is 480 or less then add meta viewport tag
  // (so default mobile display is used on iPads until that optimised view is added)
  if (window.innerWidth <= 480) { // This looks at the size of the visual viewport
    $('#viewport').attr('content', 'width=device-width');
  }

}

In my index.html:

<meta id="viewport" name='viewport'><!-- content attr is added via JS -->

Any ideas how I can get that block to run as early as possible so it actually takes effect?

Thanks Neil

Answer 1

You may be running into an issue with the dpi/definition of the device, basically 1 pixel is not equal to 1 pixel. This should be fairly easy to research.