What Is Better: CSS Media Queries or Jquery Mobile

What is better: CSS media queries or JQuery mobile?

I will classify methods by their importance, from most important one to less important:

Client side detection

Using Modernizer javascript library to detect mobile / desktop environment

Server side detection

Using Modernizer Server or WURFL. Little complex then first solution but much more detailed (if you need more data about used device)

CSS media queries

Bad solution to detect desktop /mobile devices. Current mobile devices can have screen resolution equal to desktop platform

JavaScript based browser sniffing

Worst solution possible. Specially if you want to make distinction between smartphones and tablets.

To find more about this solutions, read my other article/answer with examples: https://stackoverflow.com/a/15055352/1848600

CSS Media Queries vs Jquery responsive solution?

CSS media queries is the only modern way to build a responsive website. jQuery and serverside solutions are about a decade out of date.

JQuery Mobile and CSS3 media queries

Aha!

Very silly mistake on my side. As I mentioned above in response to hungerpain I was including the CSS for the media query inside <style> tags. I got to this point after moving them from an included stylesheet thinking that it would sort the issue. As it turns out it didn't. However, what I am after discovering is that it is within the loading page (page into which I am loading the destination URL) that I should have been either referencing the included stylesheet or at the very least adding the media query within the <style> tags.

So, to summarize -

1. I loaded index.html
2. I wanted to load home.html into it and hide a DIV in home.html depending on the viewport size.
3. Instead of including the media query in the home.html as I was doing I should have included the media query/stylesheet in the parent page - index.html as it is into that page that the html content of home.html will be loaded

Thanks guys,

T

JQuery Mobile, Bootstrap and CSS3 Media Queries, what combination to choose

Sure you could probably get boostrap and JQM css to play nicely together. And the way you have it should work for the most part with the exception of maybe a class or two being overwritten. If you do chose this route be sure to make a custom build of bootstrap that only includes that part of bootstrap you intent to use. Eliminate as much overhead as possible.

It is however not that hard to use css3 media query. Taking a quick crash course for media queries will save your users bandwidth and also ensure that your site loads as fast as possible.

Here are some great examples and tutorials on using css3 media queries:

http://css-tricks.com/css-media-queries/

http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design

http://webdesignerwall.com/tutorials/css3-media-queries

http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/

jQuery Mobile Panel & Media Queries

A quick solution is to make the panel dismiss layer appear below the panel using z-index. By default the panel has a z-index of 1001 and the dismiss div has 1002. In your media query, you can set the dismiss div z-index to 999:

@media only screen and (min-width: 30em) {
        .ui-page {
                width: 30em !important;
                margin: 0 auto !important;
                position: relative !important;
                border: 1px solid lightgrey !important;
                border-radius: 15px;
                padding: 10px;
        }

        .ui-panel-dismiss {
                z-index: 999;    
        }
}

Updated FIDDLE

NOTE: if you want to be more thorough, you could size and position the dismiss div on panel open.

$(window).width() not the same as media query

If you don't have to support IE9 you can just use window.matchMedia() (MDN documentation).

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

window.matchMedia is fully consistent with the CSS media queries and the browser support is quite good: http://caniuse.com/#feat=matchmedia

UPDATE:

If you have to support more browsers you can use Modernizr's mq method, it supports all browsers that understand media queries in CSS.

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}

---

Related Topics