无法将元视口宽度设置回屏幕宽度

时间:2016-08-10 22:57:33

标签: javascript jquery css viewport meta-tags

我想把我的剧本改为:

  1. 点击链接(#breakCSSButton),将元标记的视口宽度更改为1280,然后调整大小。

  2. 再次点击链接,将元标记的视口宽度更改回window.screen.width

  3. 我不明白为什么它不起作用。我有一个锚标记按钮:

    <a href="#" id="breakCSSButton">

    下面是代码:

    $(function () {
    if ( $('#breakCSSButton').hasClass('dviewToggledOn') == false ) {
        console.log($('#breakCSSButton').hasClass('dviewToggledOn'));
        $('#breakCSSButton').on('click', function () {
            viewportBreak = document.querySelector("meta[name=viewport]");
            viewportBreak.setAttribute('content', 'user-scalable=1, initial-scale=1, maximum-scale=4, width=1280');
            $( window ).resize();
            $('#breakCSSButton').toggleClass('dviewToggledOn');
        });
    }
    if ( $('#breakCSSButton').hasClass('dviewToggledOn') == true ) {
        $('.dviewToggledOn').on('click', function () {
            deviceScreenWidth = window.screen.width;
            viewportBreak = document.querySelector("meta[name=viewport]");
            viewportBreak.setAttribute('content', "user-scalable=1, width=" + deviceScreenWidth + ", initial-scale=1, maximum-scale=4");
            $( window ).resize();
            $('#breakCSSButton').toggleClass('dviewToggledOn');
        });
    }
    
    });
    

2 个答案:

答案 0 :(得分:0)

@Whothehellisthat这似乎不起作用......这是你的意思吗?:

$('#breakCSSButton').on('click', function () {
if ( $('#breakCSSButton').hasClass('dviewToggledOn') == false ) {
  viewportBreak = document.querySelector("meta[name=viewport]");
    viewportBreak.setAttribute('content', 'user-scalable=1, initial-scale=1, maximum-scale=4, width=1280');
    $( window ).resize();
    $('#breakCSSButton').toggleClass('dviewToggledOn');
  }

if ( $('#breakCSSButton').hasClass('dviewToggledOn') == true ) {
  deviceScreenWidth = window.screen.width;
    viewportBreak = document.querySelector("meta[name=viewport]");
    viewportBreak.setAttribute('content', "user-scalable=1, width=" + deviceScreenWidth + ", initial-scale=1, maximum-scale=4");
    $( window ).resize();
    $('#breakCSSButton').toggleClass('dviewToggledOn');
  }
});

答案 1 :(得分:0)

以下是有效的。我决定在两个不同的html按钮上做一个.show和.hide。这种代码更简单。我认为问题在于它不喜欢在多次动态更改(即添加类并处理它)之后处理相同的元素(#breakCSSButton)。它也可能已经识别出同一个类上的click操作,并基于单击运行两个if语句...

    $(function () {
      $('#breakCSSButton').on('click', function () {
            viewportBreak = document.querySelector("meta[name=viewport]");
            viewportBreak.setAttribute('content', 'user-scalable=1, initial-scale=1, maximum-scale=4, width=1280');
            $( window ).resize();
            $('#breakCSSButton').hide();
            $('#restoreCSSButton').show();
      });
     });

    $(function () {
      $('#restoreCSSButton').on('click', function () {
            deviceScreenWidth = window.screen.width;
            viewportBreak = document.querySelector("meta[name=viewport]");
            viewportBreak.setAttribute('content', "user-scalable=1, width=" + deviceScreenWidth + ", initial-scale=1, maximum-scale=4");
            $( window ).resize();
            $('#breakCSSButton').show();
            $('#restoreCSSButton').hide();
      });
     });