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.
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.
Download the source files.