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>