high resolution devices display extra small bootstrap layout

Question

According to browserstack these are the specs for say Samsung Galaxy S7:

Screen Size 5.1 in - 2.5 x 4.4 in
Resolution 1440 x 2560 px
Viewport 360 x 640 dp

On this device my page displays in the extra small bootstrap layout or default layout because (I think) the device reports a viewport of 360px. But due to the high resolution I'd rather prefer it to load the tablet layout as 1440 / 1.5 -> 960.

I was under the impression bootstrap does this by default. Is something faulty in my implementation or is this the default behavior? If it is the default: how can I change layouts for high resolution devices to render in tablet instead of extra small screen layout with bootstrap? (but of course keep the extra small layout for real small devices aka old phones)

https://getbootstrap.com/examples/grid/ Try with this page. It gives the same behavior. (Which makes me think it is the default behavior) — steros, Feb 13 '17 at 15:38

score 1 · Accepted Answer · answered Feb 15 '17 at 17:48

You have two ways of targeting high dpi devices: 1) with CSS, and 2) with JS.

1) With CSS

You should add a media query that changes the default behavior of Bootstrap's classes based on your needs. So, if your layout should have 2 columns (.col-sm-6 is 50% above 768px) even when the browser says your high dpi device should be rendering as one column (.col-sm-6 has 100% width below 768px), you can do this:

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi)
    {
        .col-sm-6 {
            float: left;
            width: 50%;
        }
    }

You can read more about this approach in this Gist.

2) With JavaScript (my personal choice)

You don't have to touch in any CSS, so chances are you are not going to have unexpected behavior. On page load, just change the viewport initial-scale to the device's pixel ratio.

Assuming that you already have this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Your script will be like this:

document.addEventListener('load', function() {
    var scale = 1 / (window.devicePixelRatio || 1);
    var content = 'width=device-width, initial-scale=' + scale;

    document.querySelector('meta[name="viewport"]').setAttribute('content', content)
}, false)

Which has the essence of this approach.

I ended up with a combination of 2) and this: http://stackoverflow.com/a/20413768/928666 — steros, Feb 16 '17 at 10:30

Serg Chernata · Answer 2 · 2017-02-13T16:36:41.233

0

You answered your own question, the effective viewport size for Galaxy S7 is 360x640. Thus, it falls within the xs breakpoint of 768px or less.

The easiest option at your disposal is to create a custom grid via the official generator.

edited Feb 13 '17 at 16:36

answered Feb 13 '17 at 15:56

Serg Chernata

12,280
6
32
50

Yes but that's just half of the question. – steros Feb 13 '17 at 16:21
Updated the answer. – Serg Chernata Feb 13 '17 at 16:36

high resolution devices display extra small bootstrap layout

2 Answers2

1) With CSS

2) With JavaScript (my personal choice)

Linked