Can't set the meta viewport width back to the screen's width

Question

I am trying to get my script to:

1. by clicking on a link (#breakCSSButton), change the meta tag's viewport width to 1280 resizing it.

2. by clicking on the link again, change the meta tag's viewport width back to window.screen.width

I dont understand why its not working. I have an anchor tag button:

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

Heres the code:

$(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 That didn't seem to work... is this what you mean?:

$('#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

Okay the following works. I decided to do a .show and .hide on two different html buttons. The code is simpler this way. I think the problem is that it didn't like working on the same element (#breakCSSButton) after more than 1 dynamic change (ie adding a class and working on it). It may also have been recognizing the click actions on the same class and running both if statements based on a single click...

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