ikrswg
Last Updated: February 25, 2016
·
10.38K
· xander
311445 493217794033807 568617443 n

Bootstrap 3, grid system and hi-density small screens detected as XS

So I've recently been developing a website using bootstrap 3 and I came across a silly problem. I wanted to use beautiful bootstrap's responsive grid system. On design there was one column on mobile phone in portrait mode and 2 columns on landscape. Everything was going fine until I tried to preview it on iPhone 5 and Nexus 7 2. Bootstrap's media queries detected iPhone 5 (in landscape) and Nexus 7 as XS devices therefore I could have seen only one column.

The problem is that those devices have high-density screens therefore device with screen-width 1200px is being detected as 600px. Bootstrap's media queries check only the width.

But hey!, I said, the screen is big enough, I want 2 columns.

So I came up with that almost-not-hacky solution (568px is width of the iPhone5 screen in landscape view):

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 568px) {
  .col-sm-6 {
    float: left;
    width: 50%;
  }
}

This is how it looks like in LESS:

@media 
only screen and
(-webkit-min-device-pixel-ratio: 2) and (min-width: 568px) {
    .col-sm-6 {
        float: left;
        width: percentage((6 / @grid-columns));
    }
}

Of course - if less is available - you could create another set of col-* classes and related mixins dedicated for small retina displays based on original bootstrap's mixins (like e.g. .make-xs-column), but for my solution you need only pure css.

As an alternative you can solve the problem using JS.

In your html you should have a line which looks like that:

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

The idea is to alter that initial-scale using JS so it's proper for current pixel ratio.

var scale = 1 / (window.devicePixelRatio || 1);
var content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale;

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

Feel free to comment and suggest better solution :)

Say Thanks
Respond

3 Responses
Add your response

15336
0  zc9rqckfaco1mn0r9h5rn3p7qctlvl0kqnwrbaukancmy xy1tvyc5ctsgs jx1198h0rfll as

allowPageScroll:"auto"

over 1 year ago ·
20826
Newprofile3d normal

Thanks this helped me a lot. I did the CSS solution as well and it worked for my purpose.

I was able to target iPhone6 - portrait/landscape, iPad Mini portrait/landscape

over 1 year ago ·
23891
W03mk8rvankqkdalnimi normal

Great solution!

over 1 year ago ·