On a recent Titanium Mobile project, I found my app’s layout got all screwy when running on an Android tablet. To be more precise, on 10-inch class tablets (like the Xoom or ASUS Transformer), buttons and other elements were not positioned correctly. For whatever reason, the 7-inch tablets seemed to be fine.
The problem is probably caused by use of percentage-based widths and placement. I should have spent time tracking down the exact root of the problem. Instead, I copped out and wrote a JavaScript module that detects when code is running on a tablet. Then I used that info to tweak the positioning of elements.
Head on over to https://github.com/skypanther/ScreenSizes to view the code. This module provides three functions:
isTablet()returns true if you’re running on a tablet (iPad, larger Android tablets)osname()returns a string, either the result of Ti.Platform.osname (for iOS devices and Android “phones”) or “androidtablet” if you’re on a larger Android tabletscreensize()returns the diagonal screensize in inches.
You’ll see I made the somewhat arbitrary choice that the cut off point between an Android “tablet” and phone is 8” diagonally. You can pass in an alternate size if you’d like.
See the app.js file for example code for implementing the module. Here’s a screenshot from the Android emulator running Android 3.0/WXGA (Galaxy 10” tab emulation).
