Responsive Bootstrap based webpage not displaying well on mobile devices

Question

I've developed a responsive web page and tested it in my computer with a lot of different pixel resolutions for different devices, using the Chrome extension "Responsive Web Design Tester".

It is completely responsive on my computer, but when I open it in my mobile device (LG Nexus 5), it doesn't display as expected. All the responsiveness is made with Bootstrap classes and media queries.

If you enter on you mobile device http://www.danigarcia-dev.com, you can see that elements are misplaced, even the elements transitions and jQuery don't work.

But if you check the option "Request Desktop Site" (I'm using Google Chrome on my mobile device) then everything works as expected, responsiveness and animations.

Why is that?

Searching through the web, I've come to a "viewport" meta-tag problem, but it's defined as expected in my index.html:

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

Answer 1

Finally I have separated the media-queries CSS file into two different files:

• One for the desktop responsiveness, using:

  @media handheld, screen and (orientation: portrait) and (max-width: 650px) { ...

• One for the mobile device responsiveness, using:

  @media handheld, screen and (orientation: portrait) and (max-device-width: 650px) { ...

Then I've used the http://detectmobilebrowsers.com/ script in order to detect if the web page is been opening in a mobile device or not, and load the corresponding CSS stylesheet:

<script src="assets/js/detectmobilebrowser.js"></script>

<script>
    var element = document.createElement("link");
    element.setAttribute("rel", "stylesheet");
    element.setAttribute("type", "text/css");
    if (jQuery.browser.mobile){
        element.setAttribute("href", "assets/css/media-query-mobile.css");
    } else {
        element.setAttribute("href", "assets/css/media-query-desktop.css");
    }
    document.getElementsByTagName("head")[0].appendChild(element);
</script>