Bootstrap 3 - 移动设备上的桌面视图
Posted
技术标签:
【中文标题】Bootstrap 3 - 移动设备上的桌面视图【英文标题】：Bootstrap 3 - desktop view on a mobile device 【发布时间】：2014-03-14 13:03:45 【问题描述】：在移动设备上是否可以将引导网站显示为桌面版本？
基本上该页面将显示 992 像素或 1200 像素的视口，而不是小型设备。
例如，BBC 允许您使用页面底部的链接在移动网站和桌面网站之间切换，这正是我想做的。
谢谢， 利亚姆
【问题讨论】：
【参考方案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>
【讨论】：
以上是关于Bootstrap 3 - 移动设备上的桌面视图的主要内容，如果未能解决你的问题，请参考以下文章