css - Bootstrap 3 - 移动设备上的桌面 View

标签 css twitter-bootstrap mobile twitter-bootstrap-3

是否可以在移动设备上将 Bootstrap 网站显示为桌面版本?

基本上,页面会显示 992 像素或 1200 像素的视口(viewport),而不是小型设备。

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

谢谢, 利亚姆

最佳答案

你只需要设置视口(viewport)

像你说的那样做一个链接,这个链接是页面的重新加载但是带有?desktop_viewport=true , 然后你可以设置一个 session ,只要设置了那个 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 文件的顶部(每个页面都必须加载 witch)

<?php
session_start();
if($_GET['show_desktop_mode'] == 'true') {
    $_SESSION['desktopmode'] = 'true';
}
?>

之后,您必须根据 session 值更改视口(viewport),方法是在 <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
}
?>

关于css - Bootstrap 3 - 移动设备上的桌面 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22405816/

相关文章:

css - 如何在特定的 div 中打开链接

html - 如何将 apex 静态资源 url(图像)代码转换为 html?

html - 固定定位的 Bootstrap 崩溃

css - 有没有办法在 Angular2 中使用 wrapbootstrap 主题?

javascript - 响应式导航栏

jquery - 想连续显示4张图片,每张图片下方都有描述

html - 插入数据时表 <td> 高度增加

java - Android - EditText-可选择,不可编辑

html - Bootstrap 媒体底部不工作

jquery - 如何删除 Jquery Mobile 对话框的页面背景?