Bootstrap 3 - 移动设备上的桌面视图答案

【问题标题】：Bootstrap 3 - desktop view on a mobile deviceBootstrap 3 - 移动设备上的桌面视图
【发布时间】：2014-03-14 13:03:45
【问题描述】：

在移动设备上是否可以将引导网站显示为桌面版本？

基本上该页面将显示 992 像素或 1200 像素的视口，而不是小型设备。

例如，BBC 允许您使用页面底部的链接在移动网站和桌面网站之间切换，这正是我想做的。

谢谢，利亚姆

【问题讨论】：

标签： css twitter-bootstrap mobile twitter-bootstrap-3

【解决方案1】：

你只需要设置视口

像你说的那样做一个链接，这个链接是页面的重新加载，但带有?desktop_viewport=true，那么你可以设置一个会话，只要设置了这个会话，你就写这个

<meta name="viewport" content="width=1024">

而不是这个（响应版本）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在你的<head>

将其用作按钮

<a href="mywebsite.php?show_desktop_mode=true">I want desktop mode!</a>

并在你的 php 文件的顶部插入这个（必须在每个页面上加载女巫）

<?php
session_start();
if($_GET['show_desktop_mode'] == 'true') {
    $_SESSION['desktopmode'] = 'true';
}
?>

完成之后，您必须通过在<head> 中执行此操作来根据 Sessionvalue 更改视口

<?php
if($_SESSION['desktopmode'] == 'true') {
    /* DESKTOP MODE */
    ?>
    <meta name="viewport" content="width=1024">
    <?php
} else {
    // DEFAULT
    ?>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php
}
?>

【讨论】：

您使用哪种服务器端脚本语言？ PHP、Java、asp.NET？
有什么理由不这样做吗？我刚刚在我们的网站上尝试过，但仍然看到响应式查询开始出现。
好吧，您并没有删除响应式查询，您只是将视口设置为不同，通过这样做，您将在移动设备中看到桌面视图。但是，如果您在桌面上拉下浏览器窗口，您仍然会看到移动网站。
@Pinki - 有没有办法在桌面上也强制执行此操作？
我不知道，抱歉。这只能通过 javascript 实现。

【解决方案2】：

您可以使用 jQuery 切换 Bootstrap 响应类。例如，

/* toggle layout */
$('#btnToggle').click(function(){
    if ($(this).hasClass('on')) {
        $('#main .col-md-4').addClass('col-xs-4').removeClass('col-md-4');
        $(this).removeClass('on');
    } else {
        $('#main .col-xs-4').removeClass('col-xs-4').addClass('col-md-4');
        $(this).addClass('on');
    }
});

演示：http://www.bootply.com/121943

【讨论】：

【解决方案3】：

我一直在使用响应式网格选择器并为我的页面创建了桌面视图。首先，需要如前所述将视口更改为

<meta name="viewport" content="width=1024">

但仅此一项并不会改变网格选择器的行为。页面在移动视图中更宽，但仍然具有移动布局。为了改变这一点，我从 bootstrap.css 中获取了一份副本，并将其命名为 bootstrap-non-responsive.css。在这个文件中，我将不同视图的所有制动点更改为 1 px 的宽度。

这可以通过使用关键字@Media 更改所有行来完成。例如

@media (min-width: 768px) {

需要改成

@media (min-width: 1px) {

如果您了解 Bootstrap 的响应性如何工作，则可以利用多次替换相同文本的优势，并且可以轻松快捷地修改 css 文件。也可以从 css 文件中删除一些代码，但这不是必需的，只是优化。

最后我创建了一个切换桌面视图的链接（使用类“hidden-lg”），它创建了一个cookie来保存视图的选择。如果有桌面视图的选择。我更改了正常代码：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css">

到

<meta name="viewport" content="width=1024">
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap-non-responsive.css" />

如果选择了桌面视图，我会显示返回移动视图的链接，这将删除 cookie 并切换到响应式视图。

【讨论】：

【解决方案4】：

是的，只是不要使用 Bootstrap 响应式网格选择器。

【讨论】：

我确实希望网站默认响应，但我想要一个链接，让访问者可以选择切换到“桌面网站”

【解决方案5】：

“通过将最外层的.container 更改为.container-fluid.，将任何固定宽度的网格布局转换为全宽度布局”

文档说要添加 .container-fluid. 类以使其流动，因此通过删除它可以阻止它流动。

您可以使用 jQuery 来更改类。

<a id="js-switch">switch to desktop</a>

    <script>
       $("#js-switch").on('click', function(event) {
            event.preventDefault();
            /* Act on the event */
            $("#container-id").removeClass('container-fluid');
            $("#container-id").addClass('container');
       });
    </script>

【讨论】：