I need to dynamically load banner images into a HTML5 app and would like a couple of different versions to suit the screen widths. I can’t correctly determine the phone’s screen width, so the only way I can think of doing this is to add background images of a div and use @media to determine the screen width and display the correct image.
For example:
<span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>
Is this possible, or does anyone have any other suggestions?