0

I'm developing a responsive website. I was convinced that most phones will be using the col-xs-* sizes but as it turns out most phones are using col-sm-*. I'm running my website under three android emulators. Sizes are respectively: 320x240, 854x480 and 1280x720. Simple test I came up with is putting this div:

<div class="col-sm-6 hidden-lg hidden-md hidden-xs" style="background-color: black; height: 200px"></div>

somewhere on a webpage. As you can see it should show only for sm device resolution and indeed it is, but I don't get why. Each of those emulators has width < 768px so I thought it won't be shown.

The question is: why is that?

EDIT

More and more doubts :). I found this site: https://getbootstrap.com/examples/grid/ which states that The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). which made me confused even more. Which phones will have this xs size?

EDIT

And when I've put this code at the bottom of my webpage:

<script type="text/javascript">
    (function() {
        alert(window.innerWidth);
    })();
</script>

I got the value 980 for each one of the emulators. The same goes if I try to test my webpage under chrome (desktop) using developer tools (there's an option to switch into a mobile view).

Marek M.
  • 3,799
  • 9
  • 43
  • 93

1 Answers1

0

Ok, so for future generations - I found an answer here: Why is my Android device-width 980px? that got this to work properly for me. In case that question was deleted or smth - add this to your <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Community
  • 1
  • 1
Marek M.
  • 3,799
  • 9
  • 43
  • 93