title: How to serve a mobile version of website to phones
body: <p>I have searched but don't find what I am looking for here on the forum.  I have a standard HTML (not wordpress) website.  It displays great on desktop and ipad.  I built a mobile version that is very scaled down with just basic information using jquery mobile.<br>
  The question is, how do I serve the mobile files to only phones?  What code can I use to tell the phone to use the jquery mobile files or url instead of the normal desktop files? I also added a "view full site" button on the jquery mobile version of the site.  How do I get the phones to display the full site if "view full site" is selected and not go back to the mobile version once selected?  I see this done on many sites but have not been able to figure it out.  Thanks for any help! Mike </p>
  
  <p><strong>This is my main site at mikeschaler.com</strong></p>
  
  <pre><code>// will allow to use sessions
  session_start();
  
  if(!isset($_SESSION['mobile_detect'])) {
      require_once 'Mobile_Detect.php';
      $detect = new Mobile_Detect;
  
      if ( $detect-&gt;isMobile() ) {
          header('Location: mobile.mikeschaler.com');    
      }
  }
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  
  
  &lt;link rel="shortcut icon" href="/MESfavicon.ico" type="image/x-icon" /&gt;
  &lt;link rel="icon" href="/MESfavicon.ico" type="image/x-icon"&gt;
  
  &lt;title&gt;Mike Schaler Media Services&lt;/title&gt;
  
  &lt;style type="text/css"&gt;&lt;/style&gt;
  
  &lt;link href="mikeSiteRedesign.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;script type="text/javascript"&gt;
  
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-19130075-1']);
    _gaq.push(['_trackPageview']);
  
    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  </code></pre>
  
  <p><strong>This is the mobile site I am trying to serve to mobile users at mobile.mikeschaler.com:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Precison Garage Door&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="themes/Precision-Garage-Door.min.css" /&gt;
          &lt;link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" /&gt;
          &lt;link rel="stylesheet" href="jquery.mobile.structure-1.4.0.min.css" /&gt;
          &lt;script src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
          &lt;script src="jquery.mobile-1.4.0.min.js"&gt;&lt;/script&gt;
  
  session_start();
  $_SESSION['mobile_detect'] = 0;
  header('Location: mikeschaler.com/index.html');
  
      &lt;/head&gt;
  </code></pre>
  
  <p>Is this what you are looking for?  Thanks!</p>
  
  <p>Ok, I deleted the code from the mobile.mikeschaler.com site. 
  I created a php file with the "// will allow to use sessions session start..." code.<br>
  On the mikeschaler.com site I inserted at the top of the code   Do I have all of this correct? Mike</p>
  
  <p>Full site code looks like this now:                                                  </p>
  
  <pre><code>&lt;?php 
  mobileRedirect.php 
  ?&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  </code></pre>