無法將元視口的寬度設置回屏幕的寬度

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