0

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>
Cheburek
  • 2,103
  • 21
  • 32
  • how good would then be jQuery mobile if javascript is switched off? – Leon Nov 30 '11 at 11:50
  • You did not mention which language your web site is in. I have a php script if that would help. Just add a noscript tag to tell them to turn on javascript. – Cymbals Nov 30 '11 at 14:46
  • @Cymbals actually C#. But I'd like not to show message but load default css instead – Cheburek Nov 30 '11 at 14:55
  • @Leon If JS is disabled then use HTML version only (load default styles) and of course without any jq :) – Cheburek Nov 30 '11 at 14:57

1 Answers1

1

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?

Community
  • 1
  • 1
Phill Pafford
  • 83,471
  • 91
  • 263
  • 383
  • Thanks, I'll review those links. Probably tablets should use jQuery because of their display resolution and multitouch functionality... – Cheburek Nov 30 '11 at 14:59
  • Probably that's the answer but I must recheck if it works. Basically I like the detectmobile.js idea. – Cheburek Nov 30 '11 at 15:29
  • I would definitely use JQuery on tablets - it rocks on iPad and Android. – Cymbals Nov 30 '11 at 16:00
  • I've got window.screen.availWidth from detectmobile.js and will update question with resulted code. It may be useful to somebody. – Cheburek Dec 01 '11 at 21:34