CSS Bootstrap 3 - 移动设备上的桌面视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22405816/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - desktop view on a mobile device
提问by user3419961
Is it possible to show a bootstrap website as the desktop version, when on a mobile device?
在移动设备上时，是否可以将引导程序网站显示为桌面版本？
Basically the page would show the 992px or 1200px viewports instead of the small devices one.
基本上页面会显示 992 像素或 1200 像素的视口，而不是小设备的视口。
For example, the BBClets you switch between the mobile and desktop site using a link at the bottom of the page, which is what I would like to do.
例如，BBC允许您使用页面底部的链接在移动站点和桌面站点之间切换，这正是我想要做的。
Thanks, Liam
谢谢，利亚姆
回答by Pinki
You Just need to set the Viewport
你只需要设置视口
Make a Link like you said, and this link is a reload of the page but with a ?desktop_viewport=true, then you can set a Session and as long as that session is set you write this
像你说的那样做一个链接，这个链接是页面的重新加载，但是有一个?desktop_viewport=true，那么你可以设置一个会话，只要设置了该会话，你就可以写这个
<meta name="viewport" content="width=1024">
Instead of this (Responsive version)
而不是这个（响应式版本）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In your <head>
在你的 <head>
Use this as a button
将此用作按钮
<a href="mywebsite.php?show_desktop_mode=true">I want desktop mode!</a>
And insert this at the top of your php-file (witch must be loaded on every page)
并将其插入到 php 文件的顶部（必须在每个页面上加载女巫）
<?php
session_start();
if($_GET['show_desktop_mode'] == 'true') {
$_SESSION['desktopmode'] = 'true';
}
?>
After doing that, you have to change the viewport according to the Sessionvalue by doing this in <head>
这样做之后，您必须通过执行此操作根据会话值更改视口 <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
}
?>
回答by Zim
You could toggle the Bootstrap responsive classes using jQuery.. For example,
您可以使用 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');
}
});
回答by Lowkase
Yes, just don't use the Bootstrap responsive grid selectors.
是的，只是不要使用 Bootstrap 响应式网格选择器。
回答by Will
"Turn any fixed-width grid layout into a full-width layout by changing your outermost .containerto .container-fluid."
“你可以将任何固定宽度的网格布局成一个全宽度的布局，通过改变你的最外层.container，以.container-fluid.”
The docs say to add the .container-fluid.class to make it fluid so by removing it you can stop it being fluid.
文档说添加.container-fluid.类以使其流畅，因此通过删除它可以阻止它变得流畅。
you could use jQuery to change the classes.
您可以使用 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>
回答by m?ks?
I have been using responsive grid selectors and created desktop view to my page. First, viewport needs to be changed as stated earlier to
我一直在使用响应式网格选择器并为我的页面创建桌面视图。首先，如前所述，视口需要更改为
<meta name="viewport" content="width=1024">
but this alone doesn't change behavior of grid selectors. Page is wider in mobile view but it has still mobile layout. To change this, I took a copy from bootstrap.css and named it to bootstrap-non-responsive.css. In this file I changed all the braking points of different views to width of 1 px.
但这本身并不会改变网格选择器的行为。移动视图中的页面更宽，但它仍然具有移动布局。为了改变这一点，我从 bootstrap.css 中复制了一份并将其命名为 bootstrap-non-responsive.css。在这个文件中，我将不同视图的所有制动点更改为 1 px 的宽度。
This can be done by changing all the rows with keyword @Media. E.g.
这可以通过使用关键字@Media 更改所有行来完成。例如
@media (min-width: 768px) {
needs to be changed to
需要改为
@media (min-width: 1px) {
It's possible to take advantage of multiple replacements of same texts and it's easy and quick to modify css file if you understand how Bootstrap's responsiveness works. It's possible to remove some code from css file too, but it's not necessary, just optimization.
如果您了解 Bootstrap 的响应性如何工作，则可以利用相同文本的多次替换，并且可以轻松快捷地修改 css 文件。也可以从 css 文件中删除一些代码，但这不是必需的，只是优化。
Last I created a link to switch desktop view (used class "hidden-lg"), which created a cookie to save selection of view. If there was a selection of desktop view. I changed normal code:
最后我创建了一个切换桌面视图的链接（使用类“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">
to
到
<meta name="viewport" content="width=1024">
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap-non-responsive.css" />
If desktop view had been selected, I showed link back to mobile view which would remove the cookie and switch to responsive view.
如果选择了桌面视图，我会显示返回到移动视图的链接，这将删除 cookie 并切换到响应式视图。
