Change meta viewport tag

Question

I need to change the meta viewport tag, depending on the width of the visual viewport. I know HOW to do this, but it doesn’t work, I think, because the site works with this little JS too late for it to take effect. Perhaps this is not so, 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 this unit to work as early as possible so that it really takes effect?

Thanks neil

Answer 1

You may have a problem with dpi resolution / device definition, basically 1 pixel is not equal to 1 pixel. This should be fairly easy to explore.