如何通过单击移动设备上的简单链接来切换桌面视图？

Question

On my responsive website (WordPress) I have a link "View desktop version".

I want when I click on that link the desktop view enable and when I click on "View mobile version" it came back to mobile version. Is it possible?

Answer 1

Move any common settings into a separate stylesheet. You should now be left with a stylesheet that only has media queries. In the link tag for the responsive stylesheet add id="dynSS" . Next create a separate stylesheet with only the desktop styles, don't add a link for this stylesheet.

Add this link somewhere in your document.

<a href="javascript:void(0)" id="toggleSS"></a>

Next, the script

Change ssSmURL to the relative url of your responsive stylesheet
Change ssLgURL to the relative url of your non-responsive stylesheet
Change breakPoint to the maximum width of the mobile stylesheet

Basically we dynamically create a new link element with the proper attributes for the style sheet and a unique id so we are not removing common stylesheets.

Then we remove the current stylesheet if it exists and append the new stylesheet.

(function() {
  "use strict";
  window.onload = function() {
    var ssSmURL = 'small.css';
    var ssLgURL = 'large.css';
    var breakPoint = 1000;
    var ssURL;
    var toggle = document.getElementById('toggleSS');

    function loadSS(url) {
      var ss = document.createElement("link");
      ss.href = url;
      ss.rel = "stylesheet";
      ss.id = "dynSS";
      var current = document.getElementById('dynSS');
      if (current) current.remove()
      document.head.appendChild(ss);
      ssURL = url;
      if (ssURL === ssLgURL) {
        toggle.textContent = 'mobile';
      } else {
        toggle.textContent = 'desktop';
      }
    }

    if(window.innerWidth <= breakPoint) {
      toggle.textContent = 'desktop';
    }

    toggle.onclick = function(e) {
      if (ssURL === ssSmURL)
        loadSS(ssLgURL);
      else
        loadSS(ssSmURL);
    };
  }
})();