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 :)