unknown os platform
Responsive web design for mobile and desktop version in PHP | Whats-online.info
whats-online-info

Responsive web design for mobile and desktop version in PHP


Responsive
2016:08:21 / Science and Tutorials

Responsive website design for mobile and desktop version in PHP depending on the current device screen width.






Web site responsiveness is one of the major factor for a SEARCH ENGINE OPTIMIZATION

There are several methods  one can use to build a responsive site.


1. Responsive web design with CSS and HTML using CSS media query.

2.Building Separate websites, for mobile version and the desktop version with different URLs but referring to the same content as shown below.


For this tutorial, I'm going to explain how to create separate sites, with different domains but carrying  the same content,i.e,  a Mobile version and a desktop version as shown below. 

The function below works by detecting the device type (mobile, desktop or tablet) the site visitor is using and then re-directing him or her to the pointed domain.

 For instance, If it detects the site visitor is using a mobile version, he or she is redirected to the mobile version (m.example.com) and vice versa


DESKTOP VERSION (WWW.EXAMPLE.COM)


<?php require_once 'Mobile_Detect.php'; $detect = new Mobile_Detect; $deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer'); $scriptVersion = $detect->getScriptVersion(); if($deviceType=='tablet' || $deviceType=='phone' ){       header('location: http://m.example.com'); } ?>





Download the Mobile Detect PHP File



The PHP file below contain the functions to detect the device type the user is using.

Download the mobile detect function and include it on your project root folder. Then call it to every webpage file using either the include() or require() function.


include("Mobile_Detect.php");


Download Mobile_Detect.php 















You may also like:


Leave a comment












Subscribe to get replies direct to your mailbox

Submit comment