Any simple way to disable Bootstrap mobile view on desktop?

Question

After digging around I am not sure if this is possible outside of conditionally overriding a lot of CSS classes. Is there anything I am missing? I would have loved if viewport worked on desktop browsers, because it is trivial to show a desktop view on mobile devices using it. But I can't seem to find any way to set or fake the values that Bootstrap is reading to know when to break into mobile view. Is there any way to "trick" Bootstrap into thinking the dimensions are still desktop sized? I have tried setting widths on .container and the html tag, and this does introduce horizontal scroll bars but because the site was originally built responsively from the ground up, everything inside the pages is still flipping to the mobile view. The mobile view still has to be maintained for actual mobile devices.

This situation is also not likely ideal but it is a client request I am trying to honor. Any strategies at all would be most appreciative. Thank you!

Not really remove it. I could follow the advise in the official docs if I wanted to completely remove it. Instead, I only want to prevent it from entering the mobile view on desktop. I think the answer would have to come from some trick or hack outside of Bootstrap, otherwise I believe the only answer within Bootstrap would be to override dozens of classes. — LeftOnTheMoon, Apr 19 '16 at 19:01

Nitish Kumar · Answer 1 · 2016-04-19T19:48:17.620

1

use the CSS scale() transform function on the tag to scale EVERYTHING inside.

html {
    transform: scale(.5);
    -webkit-transform: scale(.5);
    -moz-transform: scale(.5);
    -ms-transform: scale(.5);
    -o-transform: scale(.5);
    width: 200%;
    height: 200%;
    margin: -50% -50%;
}

edited Apr 19 '16 at 19:48

answered Apr 19 '16 at 18:44

Nitish Kumar

317
5
17

Thank you! However, both of these I do already have. The issue is quite a bit more complicated. This website was designed from the ground up to be responsive, and thus every page has mobile views made up with Bootstrap grids, visible-sm, hidden-xs, and things like this. All of these are still being tripped when the browser goes into extra-small size so the mobile views are still appearing. – LeftOnTheMoon Apr 19 '16 at 19:00
Basically you want to have the desktop view on mobile too? – Nitish Kumar Apr 19 '16 at 19:32
We were able to allow the desktop view to be a selectable option on mobile devices because in that case we can just set the width of the viewport. But on desktop viewport doesn't influence the width of the page, so we can't do the same thing on desktop. – LeftOnTheMoon Apr 19 '16 at 19:39
Check the answer I have just edited. Tell me if it works or not. – Nitish Kumar Apr 19 '16 at 19:49
Good thinking, but sadly that doesn't work either. After digging through W3C white papers, I determined that media queries on desktop browsers are based on something called the "Page Box", which is untouchable from CSS or Javascript. I did find a decent way to do this, however. – LeftOnTheMoon Apr 23 '16 at 20:19

score 1 · Accepted Answer · edited May 23 '17 at 12:08

Okay I was able to do this through some slight-of-hand. I made a separate file with size overrides based on this SO post. Then I made a separate "no-mobile" version of our site.less file by setting up LESS files like this:

@import "Site.less";
@import "variable-overrides.less";

Since LESS works in the top-to-bottom override style of CSS, this overwrote everywhere in our own site LESS file where we used the Bootstrap screen size variables. The LESS compiler also automatically created the secondary CSS file. I did the same thing with Bootstrap itself to create the responsive-less Bootstrap (by importing bootstrap.less and then the variable override LESS file beneath it).

Determining if I was on a true desktop browser or a mobile browser was a bit tougher. To my knowledge, feature detection doesn't work in this scenario (screen width doesn't work because a desktop browser can be shrunk to the same dimensions). So I ended up using OS detection. I know, not the greatest solution, but it is what the client wants. I ended up using the Sniffr library to determine what OS I am on and it seems to work very well through my testing (although I know it can obviously be fooled, it will just cause the user to get a different view of the website). After I know which OS I am on, I dynamically link the CSS like this.

So yes, a little hacky, but it seems to work great so far. I really wish viewport worked on desktop browsers, as that would have made things so much easier, but this is not a bad solution. LESS allows all of our LESS to be in one file, so there is absolutely no duplication to create the second CSS file, and its variable overriding system was definitely necessary for this to work.

Maybe this will be useful to someone else!

Any simple way to disable Bootstrap mobile view on desktop?

2 Answers2