Question

在移动设备上，是否可以将自举网站显示为桌面版？

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

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

谢谢，利安

Answer 1

您只需设置视口

即可

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

<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>

中执行此操作，根据会话值更改视口

<?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
}
?>

Answer 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

Answer 3

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

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

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

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

@media (min-width: 768px) {

需要更改为

@media (min-width: 1px) {

可以利用多个相同文本的替换，如果您了解Bootstrap的响应能力如何，则可以轻松快速地修改css文件。可以从css文件中删除一些代码，但这不是必需的，只是优化。

最后我创建了一个切换桌面视图的链接（使用了类＆＃34; hidden-lg＆＃34;），它创建了一个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并切换到自适应视图。

Answer 4

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

Answer 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>

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

5 个答案: