2012年8月19日 星期日

How to detect mobile devices on your website

This article is good to explain for all. http://webdesign.about.com/od/mobile/a/detect-mobile-devices.htm

To summary that:
1. Use Javascript to detect mobile devices. I think most web browser support it.
2. CSS: Just change CSS for mobile devices but it's may a little hard to edit in the same page.
3. Use PHP, ASP or JSP etc. to catch client device type. Not sure that it can detect all.

If using Javascript, try to detect display width like this.

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
or 
For iOS devices: iPhone & iPod
<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
   location.replace("http://your site/mobile.html");
}
-->
</script>



沒有留言:

張貼留言