Question

使用响应式布局时，为用户提供在移动设备上查看网站桌面版本的选项的最简单方法是什么？

Answer 1

为某些类提供响应主要HTML的响应，例如：

<body class="responsive">
...
</body>

为正常屏幕编写没有.responsive父前缀的CSS：

.myheading {
...
}
.mybutton {
...
}

在媒体查询中使用.responsive父级前缀用于较小的屏幕

@media all and (max-width: 320px) { /* example */
    .responsive .myheading {
    ...
    }
    .responsive .mybutton {
    ...
    }
}

当有人想要查看大屏幕版本时，只需执行以下操作：

$('body').removeClass('responsive');

，您的媒体查询将从此处被忽略。当您想切换回响应时，只需执行以下操作：

$('body').addClass('responsive');

注意：上面的解决方案假设jquery，即使没有jquery也可以轻松完成。

Answer 2

不会有这样的工作吗？

 $('#TOGGLE').on('click', function() {
     $('meta[name="viewport"]').remove();
 });

Answer 3

这对我有用：

在<head>和</head>之间

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

在<body>和<body>之间

<span id="desktopswitch">desktop version</span>

在<script>和</script>之间

$('#desktopswitch').on('click', function() {
    $('#viewport').attr('content','width=1024, initial-scale=0, maximum-scale=5.0, user-scalable=1');
});

不幸的是，它只适用于当前网站。要在以下网站上以这种方式查看，您应该使用php进行查询。

Answer 4

我想我找到了这个问题非常好的解决方案。它允许在完全＆＃39;之间切换。和＆＃39;移动＆＃39;版本没有使用父前缀加倍整个css样式表。我认为这可以通过＆＃39; techfoobar＆＃39;如果您的CSS超过2000-3000行，则不是很简单...

好吧，首先，<meta name="viewport" content="width=device-width">标记中必须有<head>。

然后在网站页脚的某处放置两个标签

<span id="setvar">FULL version of website</span>
<span id="removevar">Back to mobile version</span>

接下来添加主要功能：主要思想是在localstorage中存储一些局部变量。它允许保持完整版本＆＃39;在移动设备上即使转到网站的其他页面也是如此。所以当用户点击了＃34;完整版网站＆＃34;它将保持＆＃34;完整＆＃34;当他改变网站页面时。

<script>
$( document ).ready(function() {

   //when we clicking on 'show full version' we are changing viewport and define local variable into the localstorage
   $("#setvar").click(function(){
      localStorage.setItem('localVar', 'exist');
      $('meta[name="viewport"]').prop('content', 'width=1024');

      //imitate toggling effect
      $(this).hide();
      $('#removevar').show();
  });

  // when we go to other pages there is checking 'if the local variable exist' - if exist then window automatically switched to full version
  if (localStorage.getItem('localVar') === 'exist') {
    $('meta[name="viewport"]').prop('content', 'width=1024');
    $('#setvar').hide();
    $('#removevar').show();
  }

  // when we click on 'Back to mobile version' we are removing local variable from localstorage and restore default viewport
   $("#removevar").click(function(){
      localStorage.removeItem('localVar', 'exist');
      $('meta[name="viewport"]').prop('content', 'width=device-width');
      $(this).hide();
      $('#setvar').show();
   }); 
});
</script>

最后 - 添加一些样式以在桌面上隐藏此功能

<style>
#removevar{
  display:none;
}
@media screen and (min-width: 1024px) {
  #setvar, #removevar{
  display:none;
  }
}
</style>

为用户提供查看响应式布局的桌面版本的选项

4 个答案: