Don’t mean to revive an old topic but I want to say thanks for a great mobile template. I implemented it and also hashed together some code to check for a mobile browser and auto-redirect to the mobile page, with the option to return to the desktop version, if desired.
The code to perform the checking is done in php and was found on the net at http://detectmobilebrowsers.mobi/ This site offers code at no cost for non-commercial use.
Additional code to create and test for cookies was then added to check to see if the mobile visitor had already been to the site and requested to use the desktop version rather than the mobile version.
So, how do you do it?
-
First, create your mobile.php file using the information in this thread (or use any mobile page you want!). Once you have the mobile page working to your satisfaction you can move on to the next step. I renamed iphone.php to mobile.php because I use it for all smartphone and mobile browsers.
-
Next, add the code from detectmobilebrowsers.mobi to your main entry web page, or better yet, to the top of every page (very easy if you have a template that every page uses). Here is how every page on my site begins:
<?php
include('mobile_device_detect.php');
if (isset($_COOKIE["DWCmobile"]))
echo "";
else
mobile_device_detect(true,true,true,true,true,true,'http://deltaweathercam.com/mobile.php',false);
?>
Note that the code for which devices are selected as mobile can be changed by altering the ‘true’ values. See the .mobi site for details, its easy. Mine is set to route all mobiles to the mobile page.
Also note that the mobile detection only gets invoked in the absence of a cookie which is set when a visitor hits the mobile page. This results in all mobile visitors going to the mobile page first, but then allows them to ask for the desktop version from there if desired. The cookie allows them to bypass the mobile check but it expires in an hour which means the next visit they start again at the mobile page. For the purists, the echo “” is a leftover from some testing, and is there in the event you want to send a blurb to mobile users.
- The mobile page also needs some code to create the cookie. This is at the top of my mobile.php page:
<?php
setcookie("DWCmobile", "Been There", time()+3600);
?>
The cookie name DWCmobile should be changed to something relevant to your site, but also remember to change the cookie reference in the code at the top of each page in previous code callout! The text Been There is not significant, it is just what the cookie contains. You can also change the expiration time which is currently set to the current time plus 3600 seconds (1 hour).
- Finally, I added a small link at the very top left corner of my desktop page that links to the mobile page, and a link on the mobile page that goes to the desktop. You can see these links at http://deltaweathercam.com/index.php and http://deltaweathercam.com/mobile.php. Don’t be fooled by the width of the mobile page, it is elastic and will shrink in width as needed.
The most common problem encountered after implementing this type of check for the user agent is a message similar to:
Warning: Cannot modify header information - headers already sent by (output started at /path/to/yourfilename.php:#) in /path/to/mobile_device_detect.php on line x
This is because your page is sending ‘something’ before calling the file. There are several solutions but one of the easiest is to configure your php to enable output buffering. Normally, session, cookie or HTTP header data in a PHP script must be sent before any output is generated by the script. If this is not possible in your application, you can enable what PHP calls output buffering, with the output_buffering variable. With output buffering on, PHP stores the output of your script in a special memory buffer and sends it only when explicitly told to do so. This allows you to send special HTTP headers and cookie data even in the middle or at the end of your script. Use of output buffering can slightly degrade performance but only on a very busy site. The setting in php.ini is: output_buffering = Off
That’s about all there is to it. I’d love to see of the experts here make some changes and improvements. Perhaps add an option for a mobile visitor to set a permanent cookie so they never go to the mobile page, or even a configurable one.