Search code examples
javascriptjqueryhtmlwordpressviewport

Toggle button to switch between desktop/mobile view like chrome desktop site


For my mobile menu, I would like to add a toggle button to the desktop view, and the user can click the button again to go back to mobile view.

So far, I manage to make the button go to desktop view, but :-

1) How can I toggle it back to mobile view? 2) While in desktop view, if I go to other page, it just goes back to mobile view. So, how can I force it based on my current preferred view?

Basically, what I'm trying to achieve is exactly as chrome desktop site option.

Here's my code so far:

HTML

<button onclick="requestDesktopSite()">Request Desktop Site</button>

Javascript

function requestDesktopSite() {
document.getElementsByTagName('meta')['viewport'].content='width= 1440px;';
}

Solution

  • Maybe try this:

    function requestDesktopSite(){
     if(document.getElementsByTagName('meta')['viewport'].content=='width= 1440px;'){
      document.getElementsByTagName('meta')['viewport'].content='width= 400px;';
     }else{
      document.getElementsByTagName('meta')['viewport'].content='width= 1440px;';
     }
    }