Bootstrap 3 – 在移动设备上的桌面视图
在移动设备上时，是否可以将引导程序网站显示为桌面版本？
基本上页面将显示992px或1200px视口，而不是小设备之一。
例如， BBC允许您使用页面底部的链接在手机和桌面网站之间切换，这正是我想要做的。
谢谢你，利亚姆
你只需要设置视口
做一个链接就像你说的，这个链接是重新加载的页面，但有一个?desktop_viewport=true ，那么你可以设置一个会话，只要该会话设置你写这个
<meta name="viewport" content="width=1024">
而不是（响应版本）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在你的<head>
EDITED
用这个作为一个button
<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'; } ?>
这样做之后，您必须根据Sessionvalue在<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 } ?>
您可以使用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
我一直在使用响应式网格select器，并在我的页面上创build桌面视图。 首先，视口需要如前所述的那样改变
<meta name="viewport" content="width=1024">
但是这不会改变网格select器的行为。 移动视图中的页面更宽，但仍具有移动版式。 为了改变这种情况，我从bootstrap.css中取了一个副本，并将其命名为bootstrap-non-responsive.css。 在这个文件中，我把不同视图的所有制动点改为1px的宽度。
这可以通过更改关键字@Media的所有行来完成。 例如
@media (min-width: 768px) {
需要改变
@media (min-width: 1px) {
可以利用多个相同文本的replace，并且如果您了解Bootstrap的响应能力如何工作，修改css文件也很容易。 也可以从css文件中删除一些代码，但这不是必要的，只是优化。
最后，我创build了一个切换桌面视图的链接（使用类“hidden-lg”），它创build了一个cookie来保存视图的select。 如果有一个桌面视图的select。 我改变了正常的代码：
<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" />
如果select了桌面视图，我将链接显示回移动视图，该视图将移除cookie并切换到响应视图。
是的，只是不要使用Bootstrap响应式网格select器。
“通过将最外层的.container改为.container-fluid.将任何固定宽度的网格布局变成全宽布局.container-fluid. ”
文档说增加.container-fluid. 类，使其stream体，所以通过删除它可以阻止它stream体。
你可以使用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>
