Bootstrap 3 - desktop view on a mobile device

Solution 1:

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

<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>

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
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>

<?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
}
?>

Solution 2:

You could toggle the Bootstrap responsive classes using jQuery.. For example,

/* 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');
    }
});

Demo: http://www.bootply.com/121943

Solution 3:

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.

This can be done by changing all the rows with keyword @Media. E.g.

@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.

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:

<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" />

If desktop view had been selected, I showed link back to mobile view which would remove the cookie and switch to responsive view.

Solution 4:

Yes, just don't use the Bootstrap responsive grid selectors.

Solution 5:

"Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .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.

you could use jQuery to change the classes.

<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>