With mobile devices like smart phone getting more and more popular, it's not uncommon that a traditional website which have been designed for desktop device is seeing a surge traffic from mobile devices. The layout of website contents which have been suit perfectly for the bigger desktop monitors is getting ugly to squeeze everything inside the tiny window. Sooner or later you, as a website administrator, need a way to serve customized layout or content based on the device where the request is sent from. This is usually done from server side, for example, JSP code:

http://www.forumeasy.com/forums/thread.jsp?tid=129712838927&fid=javaprof28

The code is very simple. All you have to do is to check User-Agent header that most browsers send along with each request. The header usually describes the specific type and version of the browser, togther with device information.

The same goal can be achieved from client side by embedded JavaScipt.

<script language="javascript">
	var user_agent = navigator.userAgent.toLowerCase();
	var is_iphone = (user_agent.indexOf('iphone') != -1);
	var is_android = ((user_agent.indexOf('android') != -1);
	var is_mobile = (user_agent.indexOf('mobile') != -1);
	if (is_mobile) { 
	    if(is_iphone){
               window.location = "URL_TO_IPHONE_CONTENT";
            }esle if(is_antroid){
               window.location = "URL_TO_ANDROID_CONTENT";
            }else{
               window.location = "URL_TO_MOBILE_CONTENT";
            }	
	}else{
            window.location = "URL_TO_DESKTOP_CONTENT";
	}
</script>	

• Next Post: How to redesign your old webpage for mobile devices  WebSpider  02/09/2011 02:54:10 PM
• Previous Post: Client Side's Detection  WebSpider  02/08/2011 02:45:57 PM
• Next Topic: How to redesign your old webpage for mobile devices  WebSpider  02/09/2011 02:54:10 PM
• Previous Topic: How to detect if a quest to my site is from iphone, adroid or any other mobile device?  WebSpider  02/07/2011 08:26:32 PM
• Index: by Date
• Index: by Topic