XPages Tip: How to apply different styles for mobile devices (iPhone, iPad, Android, …)

I got stuck yesterday when I tried to shape my application to look different on different mobile devices. I wanted to have an iPhone look when the app gets opened with an iPhone and an Android look when it gets accessed with an Android phone. I knew that there were capabilities to achieve this but I could not find these. Now, as usual, the trick is easy.

There are properties that can be set in the xsp.properies file. First of all you have to find and access the file. Well, those of you out there working with XPages every day, proceed to the next paragraph. All others: Open the database in Domino Designer. Switch to the Java Perspective via the menu „Window\Open Perspective\Java“ and in the outline move to the „WebContent\WEB-INF“ folder.

Open the „xsp.properties“ file by double-clicking on it. Move to the „Source“ Tab. Use the following snippet to define your styles (Click on the image to get to the snippet):