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

Question

在我的响应式网站 (WordPress) 上，我有一个链接“查看桌面版本”。

我希望当我单击该链接时启用桌面视图，当我单击“查看移动版本”时它会返回到移动版本。有可能吗？

Answer 1

将任何常用设置移动到单独的样式表中。您现在应该留下一个只有媒体查询的样式表。在响应式样式表的链接标记中添加id="dynSS"。接下来创建一个仅包含桌面样式的单独样式表，不要为此样式表添加链接。

将此链接添加到文档中的某处。

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

接下来是脚本

将ssSmURL 更改为响应式样式表的相对网址
将 ssLgURL 更改为非响应式样式表的相对 URL
将breakPoint更改为移动样式表的最大宽度

基本上，我们会动态创建一个新的链接元素，其中包含样式表的正确属性和唯一的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);
    };
  }
})();