Question

我有一个响应式WordPress site，我的客户想在移动设备上选择以全尺寸方式查看网站，这是一个选择退出的响应选项。现在在这里的同事程序员的帮助下，我得到了这个：

<script>
var yetVisited = localStorage['visited'];
if (!yetVisited) {
  // open popup
  localStorage['visited'] = "yes";
  if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
    var answer = confirm('Would you like to switch to the mobile version of Klofficerent');
    if (answer) {
      console.log('yes');     
    } else {
      console.log('cancel');
      viewport = document.querySelector("meta[name=viewport]");
      viewport.setAttribute('content', 'width=device-width, initial-scale=0, maximum-scale=1.0, user-scalable=0');                
    }
  }
}
</script>

它有用，每当我访问链接kunkka.oni.cc时，我的网站都会转向在移动设备上响应，但是当我点击其他网页并且我需要它时，它不会保存此设置。有人有任何想法吗？

Answer 1

您可以使用#（即#mobile）向网址添加参数，然后在加载任何网页时使用正则表达式检查它。在页面上单击按钮时，您可以将其添加到页面上的任何锚href属性。

单击该按钮时，此代码会在页面的URL中添加“#mobile”。加载页面时，如果网址以“#mobile”结尾，则代码会将“#mobile”添加到所有href代码的<a>属性中。

if (window.location.href.indexOf("#mobile", window.location.href.length - "#mobile".length) !== -1) {
    $("a").each(function(){
        $(this)[0].href = $(this)[0].href.replace(/\#mobile$/, '') + "#mobile";
    });
}
$("#mobile").click(function(){
    window.location.href = window.location.href.replace(/\#mobile$/, '') + "#mobile";
    location.reload();
});

http://jsfiddle.net/IronFlare/qLf395dq/3/

手机上的响应或全尺寸

1 个答案: