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.
Hi and thanks for this,
is there any way to detect also the version of iPad? I men IOS 4.3…
thank you!
Different iPads have different User Agents so you’d have to compare it for that specific user agent.
http://www.quora.com/iPad-2-1/Whats-the-iPad-2-user-agent
Hope that helps
Thank you very much!