Bootstrap 3 - Desktop View on a Mobile Device

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:

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:

  1. Omit the viewport <meta> in your HTML <head> tag (<meta name="viewport" content="width=device-width, initial-scale=1">)
  2. Override the width on the .container for each grid tier with a
    single width, for example width: 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.
  3. If using navbars, remove all navbar collapsing and expanding
    behavior.
  4. 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



Leave a reply



Submit