Question

我在网站的头部添加了2个脚本。如果设备的宽度小于480像素，则第一个将比例更改为0.75;如果设备的方向更改，则第二个将重新加载页面。在重新加载页面或更改Android设备的方向时，两者似乎只有一半的工作时间。我曾尝试在自己和不同的浏览器上使用它们。代码有问题吗？这是我的设备吗？

<meta id="myViewport" name="viewport" content="width=device-width">
    <script>
        window.onload = function () {
            if(window.innerWidth < 480) {
                var mvp = document.getElementById('myViewport');
                mvp.setAttribute('content','initial-scale=0.75');
            }
        }
     </script>
          <script>  
    window.onorientationchange = function() { 
        var orientation = window.orientation; 
            switch(orientation) { 
                case 0: window.location.reload(); 
                break; 
                case 90: window.location.reload(); 
                break; 
                case -90: window.location.reload(); 
                break; } 
    }
    </script>

Answer 1

在onload事件中调用的一个脚本中尝试使用mergin：

window.onload = function () {
    if (window.innerWidth < 480) {
        var mvp = document.getElementById('myViewport');
        mvp.setAttribute('content', 'initial-scale=0.75');
    }

    window.onorientationchange = function () {
        var orientation = window.orientation;
        switch (orientation) {
            case 0:
            case 90:
            case -90:
                window.location.reload();
                break;
        }
    };
};

然后尝试运行它并告诉我发生了什么。

Answer 2

非常感谢。我自己想通了。这实际上是导致它的流体布局的问题。

脚本只能工作一半的时间

2 个答案: