Bootstrap 3 - desktop view on a mobile device

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


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

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

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.

Tags:

Css

Mobile

Twitter Bootstrap

Twitter Bootstrap 3

Recent Posts