Bootstrap 3 - desktop view on a mobile device
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
}
?>
How to show desktop version on mobile screens, in Bootstrap 3?
If you want to do this, you're going to have to dynamically change your viewport tag based on the width of the screen.
The viewport
meta tag is what makes responsive design possible on mobile devices by forcing the browser to use the device-width
as the width for the viewport. By removing this restriction, most mobile devices will lie about their width in order to get the full site. With javascript you can dynamically change it based on the page width
Start by including the tag in your HTML head
element:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Then we'll listen to the resize event and change the viewport according to your business rules:
$(window).resize(function() {
var mobileWidth = (window.innerWidth > 0) ?
window.innerWidth :
screen.width;
var viewport = (mobileWidth > 360) ?
'width=device-width, initial-scale=1.0' :
'width=1200';
$("meta[name=viewport]").attr('content', viewport);
}).resize();
Here's a working Demo in Fiddle
Note: Desktop browsers ignore the viewport tag so this will not have any affect on your development machine. In order to test these changes, you can open up the chrome debugger tools and emulate a mobile device.
Here's a screenshot:
That all being said, I would work with your user to advise against this.
Here's a quick article I just threw up on Adding a Desktop Mobile Toggle Button
It's generally not a good idea to prevent the end user from doing something that they want to do. Your first goal should be to develop a site that works well on small devices. If a user really wants to see a zoomed out view, then you can provide a toggle switch for them at the bottom of the page.
How to force desktop view on mobile devices - Bootstrap?
Thanks All,
This code works for me:
var viewMode = getCookie("view-mode");
if(viewMode == "desktop"){
viewport.setAttribute('content', 'width=1024');
}else if (viewMode == "mobile"){
viewport.setAttribute('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no');
}
How to show desktop view on mobile?
To disable responsiveness:
- Omit the viewport
<meta>
in your HTML<head>
tag (<meta name="viewport" content="width=device-width, initial-scale=1">
) - Override the
width
on the.container
for each grid tier with a
single width, for examplewidth: 970px !important;
Be sure that this
comes after the default Bootstrap CSS. You can optionally avoid the!important
with media queries or some selector-fu. - If using navbars, remove all navbar collapsing and expanding
behavior. - For grid layouts, use
.col-xs-*
classes in addition to, or in place
of, the medium/large ones. Don't worry, the extra-small device grid
scales to all resolutions.
More info on Bootstrap docs: http://getbootstrap.com/getting-started/#disable-responsive
Bootstrap 3 Apply different CSS on Mobile and computer
Use media query for mobile devices. below is template, dont forgot to add mobile meta tag.
@media only screen
and (min-device-width: 320px)
and (max-device-width: 570px)
and (-webkit-min-device-pixel-ratio: 2) {
//your css for mobile is here
}
Bootstrap 3 div order change on mobile view
When designing responsive websites, always design mobile-first. which means your HTML code represents the layout on a mobile device.
So keep div[2] first, and div[1] second by default. And then change their behaviour on larger screen sizes.
So, you can modify your code as follows:-
<div class="col-xs-12 col-md-8 col-md-push-4">2</div>
<div class="col-xs-12 col-md-4 col-md-pull-8">1</div>
On mobile, both divs have equal widths, and div[2] will appear before div[1](referring to your diagram). But on desktop and above, div[2] will be pushed to the right, and div[1] will be pulled to the left, resulting in the desired order.
Hope this helps! :-)
Related Topics
How to Remove the Url from My Print Css, So the Web Address Doesn't Print
Css to Prevent Child Element from Inheriting Parent Styles
Using Rails 3.1 Assets Pipeline to Conditionally Use Certain Css
Css - Overflow: Scroll; - Always Show Vertical Scroll Bar
Css Media Queries - Order Matters
Why Doesn't the CSS Calc() Function Work For Me
100Vw Causing Horizontal Overflow, But Only If More Than One
Can CSS Force a Line Break After Each Word in an Element
Does CSS Hover Work on Mobile Devices
How to Remove the Outline Around Hyperlinks Images
Why Does 'Overflow: Auto' Clear Floats? And Why Are Clear Floats Needed
Do I Need to Wrap Quotes Around Font Family Names in Css
Browser Support For CSS Page Numbers
Passing Parameters to CSS Animation