What is better: CSS media queries or JQuery mobile?

Question

I\'m newbie for developing mobile website. I very confused between two methods because I dont have any experience this it. Whats more better between two methods: css que

Answer 1

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

Answer 2

On a side note smartphone browsers seem to render at far lower resolution than actual device screen dimensions. Bust out a quick JS to show you your window resolution and run it on your phone.

Example: Chrome runs at 360x640px on my android screen of 1440x2560px.

Answer 3

I have to post an answer in here since this comes first in search engines and accepted answer is not accurate.

There are two main concerns regarding responsive designs:

1. Content: Content should be restructured based on the width/height of the view port so the user can view the content without the need of constant zooming in and zooming out. This needs to happen solely based on the resolution of the view port regardless of the device. It could be a mobile device or a small window in desktop. This mainly involved the look and feel of the website and it is absolutely fine to use media queries. Even IMHO it is the best to use media queries to have the separation of concerns between your view and logic. No web designer likes to see random width or height showing up on their html elements during debug without knowing where are they coming from. Media queries will help you to resize the elements and show or hide them; however, in some situations you may need to move elements around; I usually do these using ng-if or ng-switch in angular js in combination with modernizer.

2. Functionality: If you need to turn on/off features based on the device functionalities, do not depend on the viewport specifications; use the vast libraries available in JS.