4

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

4

4 回答 4

8

提供一些类，例如响应您的主要 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，也可以轻松完成。

于 2012-07-10T12:38:09.777 回答
2

像这样的东西不会起作用吗？ 

 $('#TOGGLE').on('click', function() {
     $('meta[name="viewport"]').remove();
 });
于 2012-07-10T13:08:49.597 回答
2

这对我有用：

<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.ini 查询它。

于 2013-03-27T11:36:53.340 回答
1

我想我为这个问题找到了很好的解决方案。它允许在“完整”和“移动”版本之间切换，而无需将整个 CSS 样式表与父前缀加倍。如果你有超过 2000-3000 行的 CSS，我认为'techfoobar' 的建议答案不是很简单......

嗯，首先你必须<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中存储一些局部变量。即使在访问网站的其他页面时，它也允许在移动设备上保留“完整版”。因此，当用户点击“完整版网站”时，当他更改网站页面时，它将保持“完整版”。

<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>
于 2016-07-26T08:38:29.537 回答