the Forum

How do I integrate a mobile site?

Posted on May 19, 2011 by Vincent Nalupta
Total Posts: 1 | Join date: 05-19-11

I have a website built in Expression Engine that needs a mobile version. What's the best way to adding a mobile site to the main site?

Tags: There are no tags for this entry.

3 answers, add yours below

Posted on on May 19, 2011 at 2:34pm
by Michael Rosario

One approach I use to make mobile sites is done using jQuery and CSS.

The first element involves detecting the mobile browser using the following code:

if((navigator.userAgent.match(/Android/i) ||
       navigator.userAgent.match(/webOS/i) ||
       navigator.userAgent.match(/iPhone/i) ||
       navigator.userAgent.match(/iPod/i)){ 
          << YOUR CODE HERE >>
   }; 

A second element involves some yummy chocolate chip cookies! You need to set cookies in conjunction with the code above to determine what CSS stylesheet we will serve. There's a very good jquery plugin developed by Klaus Hartl https://github.com/carhartl/jquery-cookie.

To set a cookie:


$.cookie('mobile','on',{expires:7, path:'/', domain:'YOURDOMAIN.com'});

To delete a cookie:


$.cookie('mobile','null',{expires:7, path:'/', domain:'YOURDOMAIN.com'});

To cut to the chase, here is my implementation that loads a CSS Stylesheet:

if((navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) && 
 ( $.cookie("mobile") == null ||  $.cookie("mobile") == "on")
        //Detect Browser and see if cookie is set
        ){
         $.cookie('mobile','on',{ expires: 7, path: '/', domain:'YOURDOMAIN.com'});  // Set the cookie
         $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href','LOCATION OF MOBILE CSS') );
         $('head').append('<meta name="apple-mobile-web-app-capable" content="yes" />');

        // This code removes the browser bar    
        window.scrollTo(0,0); 
 setTimeout(function() { window.scrollTo(0, 1); }, 100);      

   } else {
          if($.browser.msie)
                {  // Do nothing on IE
                 } else {
       $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href','LOCATION OF SITE CSS') );
   }}; 

AND, because we love IE so much you'll need:

<!--[if IE]>
<link rel="stylesheet"  href="LOCATION OF SITE CSS" type="text/css" media="screen,print" />
<![endif]--> 

Another implementation is to assign a class to the <BODY> depending on the cookie:

/* Instead of $('head').append().attr(); approach */
   $('body').addClass('mobile'); 

OR

Redirect to a /DIRECTORY:

/* Instead of $('head').append().attr(); approach */
   $('body').replace("URL"); 

Hope this helps. Choose your medicine.

Posted on on August 9, 2011 at 4:24am
by Ed Dawid

Very helpfulto me.Thanks!

Posted on on December 1, 2011 at 4:00pm
by skypropyprott

Thanks looking forward to trying this for myself. It's certainly easier than learning Objective C from scratch.

add your answers here

comments powered by Disqus

Amazon.com Widgets

the Forum

How do I integrate a mobile site?

3 answers, add yours below

add your answers here

Trending Threads

Tags