high resolution devices display extra small bootstrap layout

问题

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)

回答1:

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.