'Mobile' blog posts

iPad auto-rotating some images

We recently came across an issue on a customer website where a photo appeared correctly on most browsers, but was rotated ninety degrees when viewed on the iPad. The photo even showed up correctly on the Windows version of Safari.

This was puzzling us; why would one browser decide to rotate a photo when all others displayed the same photo correctly?

On further investigation, we discovered that this was because of the EXIF metadata stored in the photo. The camera, when taking the photo, saved its rotate setting for the photo in the EXIF metadata, and the iPad browser was just applying this rotate.

So the simple solution is to remove the EXIF metadata from the photo. This can be done using an application such as IfranView, or an image compression website such as PunyPNG. We used PunyPNG, and the reduced image now displays perfectly on the iPad.

Multiple Screen Sizes in Android

One of the big differences we found between iOS and Android development, is handling the multitude of screen sizes that come with Android devices.

The Android solution to this has changed in Android 3.2. Prior to this, different screen layouts could be specified for small (~<4 inch), normal (~4 inch), large(~6 inch) and xlarge (~10 inch) screens. In Android 3.2, you can specify layouts based on dp (density-independent pixel) units.

What we like most is that layouts can be specified for different available screen widths, meaning that layouts can be specified for different screen orientations. The YouTube app on the GalaxyTab does this very well; in the portrait orientation, the related videos section appears at the bottom, but when switched to the landscape orientation, this section appears on the right, making maximum use of the space available.

The android documentation contains detailed information on screen support, including how to handle screens of differing pixel densities.

  • 1