How to use media queries for mobile devices and desktop?

Tags: javascript,jquery,css3,jquery-mobile

Problem :

I know that this kind of questions were asked before, I've looked them up but still couldn't quite get my mind around it. Here's my problem: I want the index page of my website to look in desktop layout on desktops and mobile jquery on mobile devices. I set up my website and its css file only for desktops so far, but when I try to use media queries for mobile devices and create a new css for that I just can't see how I can affiliate that new css with mobile jquery. It seems to me as if I need to create a new source index file for that altogether.

Thanks for any clarifications.

Solution :

This can not be done through media queries, at least not your question.

First step

You need only one html file but 2 sets of javascript and css files. One set will cover desktop site and other set will cover jQuery mobile js and css.

Second step

Next step is to determine if browser is desktop or mobile. It can be done in few ways:

Script 1:

window.mobilecheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check; }


if(mobilecheck()) {
} else {

And here's a working example:

Script 2:

Other solution lean more toward using User Agents. Take a look at the scripts on

No matter which solution you choose you need to use it for a simple if check, is it desktop or is it mobile.

Third step:

At this point we need to some kind of resource loader. We will need to to initialize one of ours js/css sets.

Again this can be done in few ways:

Solution 1:

Take a look at yepnope, which is a simply conditional resource loading script. It is also a part of a Modernizer framework. It can be used like this (lets say you picked script 1 from a second step):

    test : mobilecheck(),
    yep  : ['','],
    nope : ['index.js', 'index.css']

or you can use requirejs. Equally good like yepnope but I find it lacking in case of a large jQuery Mobile files.

    CSS Howto..

    How do I centralize an ordered list?

    How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?

    Chrome inspector not showing body outline correctly

    How to change button colors upon click (Javascript)?

    How to fix the top row and first column in a webpage, with only CSS

    How can I align my HTML components with CSS?

    How to determine if a device is in portrait or landscape mode using CSS

    how to affect an element's width by one child element but not others using CSS

    How to set the minimum height of a
    box in Internet Explorer 8?

    how does CSS determine which way to animate a transition?

    How to correctly apply the .clearfix:after class to HTML?

    Internet Explorer: how to escape extra carriage return after editing Textarea?

    how to make the background the same as the div size in css

    How to align multiple columns in bootstrap 3 carousel?

    How to write css for each page in rails 3

    How to get a css stylesheet value that is not interpreted by the browswer?

    how to change the colour property of tag used for a text

    How do I align a flow element next to a phrasing element?

    How to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part

    How to debug web page rendering compatibility issues across browsers?

    How to stretch line between two cells ( tags)

    How to do drop-down box like “More action” in gmail

    How can I change css stylesheet with dart?

    How to keep