Question

在我的响应式网站（WordPress）上，我有一个链接＆＃34;查看桌面版本＆＃34;。

我希望当我点击该链接时，桌面视图启用，当我点击＆＃34;查看移动版本＆＃34;它又回到了手机版。有可能吗？

Answer 1

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

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

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

接下来，脚本

将ssSmURL更改为自适应样式表的相对网址
将ssLgURL更改为无响应样式表的相对网址
将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);
    };
  }
})();

如何通过点击手机上的简单链接切换桌面视图？

1 个答案: