Detecting iDevices with Adobe Edge

Adobe Edge iDetectionWhat the demo does.

It uses the browser user agent to detect whether you are on an iPhone or an iPad. Based on the device, it then injects a CSS file into the HTML page which changes the Edge Stage background colour. It then adds either an iPad or an iPhone library symbol from the library to the stage and then makes the page width and height the same as the browser width and height.

Finally it uses the bindSymbolAction function to change the text colour in both symbols upon their creation. This function had been puzzling me for a while now and, until I asked about it in this thread, there were literally no examples online.

What the demo doesn’t do (yet).

It doesn’t media query the orientation of the device – I haven’t worked this out yet. So this example only caters for landscape iPad and portrait iPhone.

What next?

Click the link below on either an iPad or iPhone and you will see one Adobe Edge HTML page that is dynamically been altered based on your iDevice. iPhones will see a green background with white text animating in. iPad users will see a yellow background with animating black text.

Click here on an iPad or iPhone.

Download the source files.

One thought on “Detecting iDevices with Adobe Edge

  1. That’s great and works really well: thanks! If you want to get it to work in landscape mode, you just need to change the symbol dimensions for iPhones. iPad 4th gen which are 2048×1536 and iPhone 5 is 1136×640, but because iOS uses 2x scaling these values need to be halved in order not to crop them out of the view port. For me I added an else statement to use the same iPad stage/symbol for my desktop site versions and all works really well.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s