iPad 3 and the Retina Display – It will make you a liar…

Recently I was hired by some folks to build them a game for their iOS news stand app. I’ve done this a few times before so I figured that this would be an easy, no headache job. The game was to be developed in HTML5 and Javascript, also not a problem and I’ve done it several times before. Here’s the twist – the client wanted to take advantage of the new iPad 3 Retina display. I hadn’t yet purchased an iPad3, but I quickly looked over the specs: Retina display resolution is 2048 x 1536. Shouldn’t be a problem!

I went out and picked up an iPad3 (this was a great excuse to get one) and started banging out the code for the game. I walked into it with this mentality: I’ll figure out the screen resolution in javascript and then either load a CSS with low-rez images or the hi-rez images. All artwork was based off of the 2048 x 1536 background and we were set. There’s several ways to build a newsstand app, and an easy way is to make several of your pages html and use safari to render it out. This works great… that is, it worked great before Retina…

Apple and I have a strange relationship. It’s mostly based off of hate… but there’s some respect layered in there as well. Apple is a big fan of breaking standards – especially HTML5 video standards. In respect to Retina displays, Apple built Safari to automatically re-render every image to a maximum size of 1024 x 1024. They also built it to never give out dimensions greater than 1024 x 768 when you query the width and height of the screen.

Needless to say, we had to go with non-Retina images in order to get Safari to work correctly… and I was made a liar. There’s a lot of lessons here and I hope others can learn along with me!

0 Responses to “iPad 3 and the Retina Display – It will make you a liar…”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: