Detect Mobile Browser using Server Side Includes (SSI)

There’s a website dedicated for open source code in various programming languages to detect mobile browsers. However they didn’t have any code to detect a mobile browser using SSI. Thats what I needed to make the HTML pages on my website mobile friendly. Using the <!--#if expr SSI conditional expression, I wrote up a small code snippet to detect the most common smart phones and set a variable when a mobile phone is detected. I use this variable in other parts of HTML to control what is show and what is not to make it suitable for a mobile browser.

<!--#if expr="$HTTP_USER_AGENT=/iPhone/" -->
  <!--#set var="MOBILEDEVICE" value="1" -->
<!--#elif expr="$HTTP_USER_AGENT=/iPod/" -->
  <!--#set var="MOBILEDEVICE" value="1" -->
<!--#elif expr="$HTTP_USER_AGENT=/iPad/" -->
  <!--#set var="MOBILEDEVICE" value="1" -->
<!--#elif expr="$HTTP_USER_AGENT=/Android/" -->
  <!--#set var="MOBILEDEVICE" value="1" -->
<!--#elif expr="$HTTP_USER_AGENT=/Symbian/" -->
  <!--#set var="MOBILEDEVICE" value="1" -->
<!--#elif expr="$HTTP_USER_AGENT=/Blackberry/" -->
  <!--#set var="MOBILEDEVICE" value="1" -->
<!--#elif expr="$HTTP_USER_AGENT=/Opera Mini/" -->
  <!--#set var="MOBILEDEVICE" value="1" -->
<!--#elif expr="$HTTP_USER_AGENT=/Opera Mobi/" -->
  <!--#set var="MOBILEDEVICE" value="1" -->
<!--#elif expr="$HTTP_USER_AGENT=/webOS/" -->
  <!--#set var="MOBILEDEVICE" value="1" -->
<!--#elif expr="$HTTP_USER_AGENT=/Fennec/" -->
  <!--#set var="MOBILEDEVICE" value="1" -->
<!--#elif expr="$HTTP_USER_AGENT=/WindowsCE/" -->
  <!--#set var="MOBILEDEVICE" value="1" -->
<!--#elif expr="$HTTP_USER_AGENT=/IEMobile/" -->
  <!--#set var="MOBILEDEVICE" value="1" -->
<!--#elif expr="$HTTP_USER_AGENT=/Googlebot-Mobile/" -->
  <!--#set var="MOBILEDEVICE" value="1" -->
<!--#else -->
  <!--#set var="MOBILEDEVICE" value="0" -->
<!--#endif -->

This code can be extended to include other Browsers, Mobile OS etc.

Save it in a file (detect-mobile.html) and include it in all your html pages, preferably in the <head> <head/>. Using the variable MOBILEDEVICE, you can include additional css stylesheets etc.

<!--#include virtual="/se-ssi/detect-mobile.html"-->
<!--#if expr="$MOBILEDEVICE=1"-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <link rel="stylesheet" href="/se-css/mobile.css" type="text/css"/>
<!--#endif--> <!-- MOBILEDEVICE=1 -->

Leave a comment to let me know if you face any issues or for any other suggestions.

3 comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.