How to have my web application render using different stylesheet on mobile device browser?

Question

Hi,

I've got a Java web application running, when accessing via a mobile device (such as safari browser on an iPhone) the JSP page renders poorly. The device screen is not suitable for the page and therefore I'm looking for a way to get around this

After some Googling, I've come across the following line that can be added to a JSP

<link href="/css/global.css" rel="stylesheet" type="text/css" media="handheld" />

Is this a sufficient way of ensuring a web application can work on both desktop and mobile browsers, or have I overlooked this completely?

I've been advised to have a look to see what Spring MVC has available to use, but I think that could possibly be a red-herring piece of advice as the above would be simpler

Answer 1

Spring MVC offers a very easy way to change "Themes" on the fly based on the HttpServletRequest - so you could conceivably have a standard Theme and then another "handheld" Theme which is activated based on the user-agent.

The Spring MVC library then allows you to use different CSS files, different whatever, in your view layer based on the current request's theme. However if you aren't currently using Spring MVC it may not be worth the hassle to migrate your application to it.

On the other hand, you could simply have your JSP render a different <link> tag based on the user-agent to use different CSS files based on conditional logic. If your application is architected well and you have the logic about setting HTML headers and the CSS includes in a single place, it should be easy enough to add this logic in just one place and have it apply everywhere.

Answer 2

CakePHP has similar functions to handle request based on the HTTP headers user-agent. You can delegate an entire website to a different view.

http://book.cakephp.org/view/1292/Obtaining-Request-Information

Answer 3

Just specify the both styles. The client knows perfectly which one to choose based on the media type. Indeed use handheld for mobiles (at least, the devices with a 300~400px wide screen).

<link rel="stylesheet" href="css/global.css" media="screen,projection">
<link rel="stylesheet" href="css/mobile.css" media="handheld">
<link rel="stylesheet" href="css/print.css" media="print">

You see, it's also able to add a specific stylesheet for printing devices. This is often overlooked as well.

Answer 4

css media queries do what you want

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">