Load jQuery Mobile for smartphones otherwise load default css

StackOverflow https://stackoverflow.com/questions/8325454

  •  26-10-2019
  •  | 
  •  

Question

I'm building a mobile oriented web site.

New phones most of all use new browsers which support html5 and css3. Very often they have touch screens. Probably owner of iPhone4 or Galaxy does not bother about page size so much - so it IMHO it is a good idea to use jQueryMobile for such user.

On the other hand there are smartphones which are also have touch screens but screen resolution is too small (i.e. 240x320) to use jQueryMobile. There are also a number of phones which do not have touch screens and also there are number of users who switch off Javascript to do not load js files and save their money.

I tried to use Modernizr to determine if mobile phone supports touchscreen but unfortunately Modernizr.touch only shows if a browser support it. It is known to use CSS Media Query Modernizr.mq() to determine the screen size and load different css files base on it but this solution doesn't solve problem with switched off javascript and old browsers like IE8.

There is also a good article http://www.alistapart.com/articles/return-of-the-mobile-stylesheet but unfortunately it has basically ideas not implementation.

Question: I'd like to load jQuery mobile for smartphones with min-width 480px. Otherwise load default css. It is possible to implement this for as many as possible mobile browsers?

Answer (result code):

<html class="defcss">
<head>
<link href="/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content( "~/Scripts/yepnope.js" )"></script>
<script type="text/javascript">
  //<![CDATA[
  if (window.screen.availWidth > 450) {
    document.documentElement.className = document.documentElement.className.replace(/\bdefcss\b/, '');
    yepnope(['//code.jquery.com/jquery-1.6.4.min.js',
        '//code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js',
        '//code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css']);
  }
  //]]>
</script>
Was it helpful?

Solution

I would look into something server side and generate the files needed, Take a look at:

There are some client side scripts but I haven't used any of them yet:

Related:

Also what about Tablets?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top