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; }

Usage:

if(mobilecheck()) {
    alert('mobile'); 
} else {
    alert('desktop');
} 

And here's a working example: http://jsfiddle.net/Gajotres/qqnZ2/

Script 2:

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

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

yepnope({
    test : mobilecheck(),
    yep  : ['jquery.mobile-1.2.0.min.js', jquery.mobile-1.2.0.min.css'],
    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..

    Shouldn't adapting the scree size of a fluid layout in the desktop show how the site should look for mobile?

    How to animate my header to slide in horizontally from left to page view on load?

    how to 'split' a css attribute/value using Jquery

    How to change where a CSS transition starts from?

    How does CSS works under the hood? [closed]

    How to put the text at the center of inner div?

    How to enlarge and shrink an element in a loop animation through jquery or CSS

    how to add more specificity to css class .background-color-blue so it overrides default div's background color

    How can I wrap content around a UL CSS Menu so content is seamless?

    How to deal with the hover issue of overlapped non-square DIV?

    How to style this value with jQuery

    How to set CSS of one element depending on another element having a specific class?

    CSS: how to address Samsung Android browser?

    How to put 3 of these tables into the correct spot with CSS

    How to change background color of elements every 5s using jquery? [duplicate]

    How do I move this label inside my textarea?

    How to have margins not offset my grid

    jQuery hide() method do show element with display:none !important

    How to get an image's height and set its parent height to auto?

    how to display background color in outlook 2010 html email?

    How to force div width with CSS to stretch to its content but not to be restricted by its container?

    How to have two sections using 50% of the total height?

    How to write css for alt attribute of img tag (word-break: break-all property doesn't work in IE)

    How to alter hover effects for image button and embedded text?

    How do I format text to wrap onto a second line using bootstrap?

    How add symbol in CSS for element?

    How to set the background-image of this text to an svg?

    making div inside div and put it right-bottom corner how?

    How to position CSS Ribbon to go over one table cell

    How to force span to use parent font-family in CSS