如何通過單擊移動設備上的簡單鏈接來切換桌面視圖？

Question

在響應式網站（WordPress）上，我具有“查看桌面版本”鏈接。

我想要當我單擊該鏈接時啟用桌面視圖，並且當我單擊“查看移動版本”時，它又回到了移動版本。 可能嗎？

Answer 1

將所有常用設置移到單獨的樣式表中。 現在，您應該剩下一個僅包含媒體查詢的樣式表。 在自適應樣式表的鏈接標記中，添加id="dynSS" 。 接下來，創建一個僅包含桌面樣式的單獨樣式表，不要為此樣式表添加鏈接。

將此鏈接添加到文檔中的某處。

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

接下來，腳本

將ssSmURL更改為響應式樣式表的相對URL
將ssLgURL更改為非響應式樣式表的相對URL
將breakPoint更改為移動樣式表的最大寬度

基本上，我們會動態創建一個新的link元素，該元素具有樣式表的適當屬性和唯一的id因此我們不會刪除常見的樣式表。

然后，如果當前樣式表存在，則將其刪除，然后追加新樣式表。

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