Xcode – Simulator vs. Device: CAPITALIZATION matters

There are, obviously and intuitively, differences between testing an iOS app on the Xcode simulator, and testing on a real device. The obvious ones run the gamut from no camera on the simulator to the way the keyboard works differently on both. The intuitive ones, in my mind, come from the fact that the Simulator is running on a different operating system (OSX) than the devices (iOS) that the app is intended for.

The difference that repeatedly bites me is: CAPITALIZATION matters.

The majority of the apps I do at JoSara MeDia are HTML5 apps in a framework called Baker. If you are interested, the rationale behind this is that most of the apps are either coming from books or eBooks (and hence are already in a format close to HTML, like ePub) or are heading in that direction (so we want to make conversion easy).

I was putting in a very nice jPlayer-based audio player (called jquery.mb.miniAudioPlayer, checkout the link, it is quite well done), and it looked great on the simulator, as you can see on the screenshots below. I tested it on several different simulator devices – all looked as expected, all performed the autoplay function, when expected.

Quebradillas Audio 2

In case you are interested, this is from a forthcoming “coffee table poetry book as an app” project called Quebradillas.

Quebradillas Audio 1

But, once I transferred the app to a device (either through cable or TestFlight) the audio player graphics did not make the transition (see screenshot below). And neither did the autoplay functionality.

Quebradillas on Device

 

Xcode capitalization problemThe culprit, of course, was two instance of capitalization. One was in the name of the included css file – in the head of the two pages, the “q” in “jquery” was lower case, and, as you can see from the Xcode screenshot, the file name itself was “jQuery.” This was acceptable in the simulator, which runs on OSX, but would not work (and, interestingly, did not pop up an error anywhere) on the devices testedĀ (iOS). After looking at the javascript code in the jquery plugin, I could see that the “Vm” and “P” were icon placeholders…which lead me to the css file misspelling.

The autoplay issue was, again, capitalization: the parameter in one of the examples had autoplay in camelCase (i.e., autoPlay), but in the mb.miniAudioPlayer.js, the parameter was simply “autoplay.”

 

By noting this, I aimĀ to remind my future self to use capitalization as one of the first items to check when apps look different in the simulator vs. on the device, especially when using HTML5 app frameworks.

You may also like...

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: