Along with the whole iPhone buzz, the business asked us to make sure our web site renders properly on iPhone Safari - not as it does on a normal browser, but without certain elements like the footer, and the layout should be slightly different.
Since one of my unofficial roles is to consult on new projects, I suggested to the team that we use CSS to render it differently, using the following snippet in the header JSP head tag:
<!-- existing -->
<link media="all" href="browser.css" type="text/css" rel="stylesheet" />
<!-- ...plus this new snippet -->
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
A little proof-of-concept proved this to work. I also saw this as the perfect opportunity to remove table-based formatting scattered all over our views, and use DIVs.
In the absence of our main stylist, the Java guy in charge of the project said that the team lacks the necessary CSS experience to do this properly. I advised they wait for the stylist to return, and then consult with her. Anyway, he's been coding web apps since the mid/late nineties, and I had to carry on with my own work.
2 or 3 months later, and I take a peek at what he's been up to.
This is what I find at the end of all our Struts Action classes:
if (request.getHeader("User-Agent").toLowerCase().contains("iphone")) {
return mapping.findForward("default.iphone");
} else {
return mapping.findForward("default");
}
All our JSPs have been duplicated to a new folder called iphone, and the tiles definitions have duplicated from "blah" to "blah.iphone". These new tiles definitions point to the copied JSPs.
The dev manager, the Java team lead and I just shook our heads over a beer later that night.
God forbid we get asked to do the same for the multitude of other devices out there...