Make your APEX app iPad compatible

I really like surfing on my iPad whenever I'm not behind my laptop.

As the iPad doesn't have a big resolution, Apple made it so that it scales websites to fit on the device. Most of the time it's doing a really good job, but a lot depend on how the developer created the site.

If you look at APEX applications, if you are using a standard theme, you have a big chance it renders well and you don't have to do that much.

However if you find that something doesn't look good, the way I make my application 'iPad compatible' is by using a different css depending the browser and device that hits the app.

Below you see a screenshot of the Header in the Template of the new APEXBlogs site.

My starting theme for APEXBlogs v2 was theme 22, but I customised it heavily as you'll see in a couple of days. I'm doing that by overwriting the standard css by defining my own in the apexblogs.css file (so make sure your own css is defined after the standard APEX ones). If the max width of the device is 1024px (like the iPad) I overwrite my own css with specific settings for these devices. So in your link you define for the media "only screen and (max-device-width: 1024px)".

As you can see theme 22 of APEX 4 itself actually renders different css's based on the browser (see if IE in screenshot). I chose to not worry about IE6 compatibility, that is why that div "outdated-browser" is in.