Redirect Mobile Devices

admin — Mon, 23 Apr 2012 15:21:42 +0000

Javascript

1. Detect and redirect based on screen size

Below code will detect device’s screen size and if it’s less than 699 pixels, it will redirect it to your mobile enabled site (in this example m.yoursite.com).

Place the below code between and tags of your page. And replace “http://m.yoursite.com” to your own URL.

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "http://m.yoursite.com";
}
//-->
</script>

2. Detect and redirect if the device agent matches iPhone or iPod

Below code will specifically look out for iPhone and iPod devices, once matches, it will redirect them to your mobile enabled site (in this example m.yoursite.com).

Place the below code between and tags of your page. And replace “http://m.yoursite.com” to your own URL.

<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
   location.replace("http://m.yoursite.com");
}
-->
</script>

PHP

Open your header.php file, go to top of the document and hit to make an empty line before all the HTML codes start. Copy and paste the following code.

Don’t forget to replace “http://m.yoursite.com” to your own URL.

<?php function mobileDevice()
{
$type = $_SERVER['HTTP_USER_AGENT'];
if(strpos((string)$type, "Windows Phone") != false || strpos((string)$type, "iPhone") != false || strpos((string)$type, "Android") != false)
return true;
else
return false;
}
if(mobileDevice() == true)
header('Location: http://m.yoursite.com'); ?>

Others

If you want to use other scripts, you may check out http://detectmobilebrowsers.com

GoNative Template (Free)

admin — Sun, 22 Apr 2012 14:45:25 +0000

GoNative is a professionally designed mobile website template with native iOS look and feel. It’s 100% mobile compatible with sliding transition effects between pages, tap to call action buttons, and map location that opens Google Maps with a pin.

It has 7 pages in total; Homepage, About, Products, Services, Pricing, Address, and Feedback. It comes with Photoshop File for images used for homepage and address pages. Customizing the template is very easy, to make it extra simple, we have put content of each page into separate files, thus keeping the content from the code separate as much as possible.

Features:

Google Map Enabled
Tap to Call buttons enabled
Slide in – Slide out page transitions between pages
Responsive buttons to touch
Contact Form elements ready
Easy to customize
Photoshop file included

Note: There is a file embedded within this post, please visit this post to download the file.

Demo: Open your iPhone/Android/Smartphone’s browser and go to bit.ly/gmt_gonative

Go Mobile Templates

Redirect Mobile Devices

Javascript

PHP

Others

GoNative Template (Free)

Screenshots