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

Question

我想让我的脚本：

1. 通过单击链接（#breakCSSButton），将meta标签的视口宽度更改为1280，以调整其大小。

2. 通过再次单击链接，将meta标签的视口宽度更改回window.screen.width

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

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

});

Answer 1

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

Answer 2

好的，以下工作。 我决定在两个不同的html按钮上执行.show和.hide。 这样的代码更简单。 我认为问题在于，在进行了1次以上的动态更改（即添加一个类并对其进行处理）之后，它不喜欢对同一个元素（#breakCSSButton）进行处理。 它还可能已经识别出同一类上的单击动作，并且基于一次单击就同时运行两个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();
      });
     });