0

I have a responsive website using twitter bootstrap, that works pretty fine on every mobile device. Except Samsung Galaxy S6. For some reason, Only the Samsung Galaxy S6 will not use the breakpoints for col-xs (Set to <768px) but the ones for col-sm.

I know the difference between viewport pixels and device pixels, so I checked for the calculated dimensions. They are correctly set to 360x640px by using the viewport meta tag. But still, I get the tablet-view on my mobile phone.

Did anyone have the same problem? I just don't want to write some awkward JS-Hack detecting the S6 as every other Android device (I checked) works pretty fine.

Ria Weyprecht
  • 1,275
  • 9
  • 19

1 Answers1

0

I just came across the same issue with just the Samsung s6.
Try writing a specific media query to handle high pixel density devices like the s6 and more than likely s7. 

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px)
  and (-webkit-min-device-pixel-ratio : 4) 
  and (-webkit-device-pixel-ratio : 4)
  and (orientation: portrait) {

your css code

}

Hopefully BS4 will address this issue in the future.

Jon
  • 31
  • 7