更改元视口标签 [英] Altering meta viewport tag

问题描述

我需要根据可视视口的宽度更改元视口标签.我知道如何执行此操作，但它不起作用，我认为这是因为该网站运行了JS太晚而无法生效.可能不是这个，但这是我的第一个想法.

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.

在我的application.js文件中:

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');
  }

}

在我的index.html中:

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?

谢谢 尼尔

推荐答案

您可能会遇到设备dpi/分辨率的问题，基本上1像素不等于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.

这篇关于更改元视口标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！