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
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.
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.
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.
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 } ?>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With