CODEWITHSUNDEEP
jqueryhtmljquery-mobilemobile
MikeS
MikeS

Reputation: 13

How to serve a mobile version of website to phones

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.
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

This is my main site at mikeschaler.com

// will allow to use sessions
session_start();

if(!isset($_SESSION['mobile_detect'])) {
    require_once 'Mobile_Detect.php';
    $detect = new Mobile_Detect;

    if ( $detect->isMobile() ) {
        header('Location: mobile.mikeschaler.com');    
    }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<link rel="shortcut icon" href="/MESfavicon.ico" type="image/x-icon" />
<link rel="icon" href="/MESfavicon.ico" type="image/x-icon">

<title>Mike Schaler Media Services</title>

<style type="text/css"></style>

<link href="mikeSiteRedesign.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

  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);
  })();

</script>

</head>

This is the mobile site I am trying to serve to mobile users at mobile.mikeschaler.com:

<!doctype html>
<html>
<head>
    <title>Precison Garage Door</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="themes/Precision-Garage-Door.min.css" />
        <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" href="jquery.mobile.structure-1.4.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="jquery.mobile-1.4.0.min.js"></script>

session_start();
$_SESSION['mobile_detect'] = 0;
header('Location: mikeschaler.com/index.html');

    </head>

Is this what you are looking for? Thanks!

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.
On the mikeschaler.com site I inserted at the top of the code Do I have all of this correct? Mike

Full site code looks like this now: 

<?php 
mobileRedirect.php 
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Upvotes: 0

Views: 1413

Answers (2)

Madnx
Madnx

Reputation: 1564

<?php
// will allow to use sessions
session_start();

if(!isset($_SESSION['mobile_detect'])) {
    require_once 'Mobile_Detect.php';
    $detect = new Mobile_Detect;

    if ( $detect->isMobile() ) {
        header('Location: mobile.mikeschaler.com');    
    }
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Here's the code you have to put instead of yours.

And then the code in mobile.php:

<?php
session_start();
$_SESSION['mobile_detect'] = 0;
header('Location: /'); // "/" to redirect to the root path
?>

Upvotes: 0

Madnx
Madnx

Reputation: 1564

You can use some PHP scripts to detect the mobile version like: http://mobiledetect.net/

Then, for the "Full website" button, send the user to a: fullwebsite.php. The page will set a session which indicates that it has to not detect the mobile version.

// will allow to use sessions
session_start();

if(!isset($_SESSION['mobile_detect'])) {
    require_once 'Mobile_Detect.php';
    $detect = new Mobile_Detect;

    if ( $detect->isMobile() ) {
        header('Location: your_url.html');
    }
}

the page which sets the session:

session_start();
$_SESSION['mobile_detect'] = 0;
header('Location: full_website.html');

Upvotes: 1

Related Questions