CODEWITHSUNDEEP
csstwitter-bootstrapmobiletwitter-bootstrap-3
user3419961
user3419961

Reputation: 373

Bootstrap 3 - desktop view on a mobile device

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.

For example, the BBC lets 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.

Thanks, Liam

Upvotes: 37

Views: 59267

Answers (5)

Pinki
Pinki

Reputation: 1042

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

Upvotes: 59

TCFDS
TCFDS

Reputation: 622

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.

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362260

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

Upvotes: 4

Will
Will

Reputation: 3044

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

Upvotes: 1

Lowkase
Lowkase

Reputation: 5699

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

Upvotes: 1

Related Questions