Search code examples
jqueryjquery-mobileresponsive-designmedia-queries

can we use media queries and JQM together?


I am trying to build a mobile website. should I use media queries and Jquery Mobile together in this project or is it redundant to use both together. Also sites built using JQM looks horrible in Desktop screens so does that mean that I have to make two separate HTML files for Desktop and Mobile if i use only Jquery Mobile ?


Solution

  • Before you do anything else consider framework name. It is called mobile for a reason. Don't get me wrong, I am not trying to act sarcastic here.

    While jQuery Mobile can be sued for mobile and desktop page development it is usually and mostly used for mobile pages. Its GUI is simply not meant to be used on a desktop browsers. It can be done with an extensive use of grids. I am talking about grids because every jQuery Mobile widget is responsive and if you use them in a block mode where everything is placed one below another it will look large and ugly. Grids will allow you to use more widgets inline.

    Your best solution would be to create different desktop and mobile application. I will even give you an excellent example of a separate desktop and mobile page development. Take a look at a desktop and mobile version of a Songmeaning page. Personally I have nothing to do with this page, I just find it to be excellent example of split desktop / mobile design.

    Regarding your other question, media queries can be used with jQuery Mobile but they are usually not needed. Specially if you use grids. For more complex pages you can combine front end HTML frameworks like Tweeter Bootstrap with jQuery Mobile.

    In the end if you are going to create just one page (both desktop and mobile) and if you are not going to use some front end HTMl5 framework I would advise you media queries usage.