Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 287
user3419961 Avatar asked Mar 14 '14 13:03

user3419961


People also ask

How do I force a desktop site to open on mobile?

On your Android device, open Chrome and navigate to a website. Once there, tap the three dots icon in the top right corner of the screen to open up the main menu. Look down the list and you'll see an option for Desktop site. Tap this and you should see the site automatically revert to the desktop version.

Does Bootstrap work on mobile?

Mobile devices Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.

Does the Bootstrap 3 uses a mobile first strategy?

Bootstrap has become mobile first since Bootstrap 3. It means 'mobile first' styles can be found throughout the entire library instead of them in separate files. You need to add the viewport meta tag to the <head> element, to ensure proper rendering and touch zooming on mobile devices.


1 Answers

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 } ?> 
like image 197
Pinki Avatar answered Oct 09 '22 10:10

Pinki