Development Blog

March 30, 2012
Detect mobile devices with jQuery.

jQuery

CSS

RAW

<style type="text/css">

#introframe {
    position: relative;
    width: 200px;
    height: 50px;
    border: 1px solid white;
}
#flashsafe	{
    position:absolute;
    width: 200px;
    height: 50px;
    top: 0;
    z-index: 2;

}
#slideshow {
    position: absolute;
    width: 200px;
    height: 50px;
    top: 0;
    z-index: 1;
}

</style>

<script type="text/javascript">

var ua = navigator.userAgent;
var checker = {
  iphone: ua.match(/(iPhone|iPod|iPad)/),
  blackberry: ua.match(/BlackBerry/),
  android: ua.match(/Android/)
};

$(document).ready(function(){
	if (checker.iphone){
		$("#slideshow").show();
		$("#flashsafe").hide();
		}
	else {
		$("#slideshow").hide();
		$("#flashsafe").show();
		}
	});

</script>

<div id="introframe">
	<div id="flashsafe">Safe to play Flash.</div>
	<div id="slideshow">You are on iPhone or iPad.</div>
</div>

RESULT

Safe to play Flash.

You are on iPhone or iPad.