javascript - 无法将元视口(viewport)宽度设置回屏幕宽度

Question

我正在尝试让我的脚本:

1. 通过单击链接 (#breakCSSButton)，将元标记的视口(viewport)宽度更改为 1280 并调整大小。

2. 再次点击链接，将元标记的视口(viewport)宽度改回 window.screen.width

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

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