I'm setting up different background images for buttons in my css based on the screen size - a larger image for mobiles, and a smaller but identical image for other screens:

For mobiles...
@media all and (max-width: 660px) { 

   #LG { background: url(/i/ALL.png) no-repeat -3px -185px; background-size:340px 225px; -webkit-background-size:340px 225px; }

For desktop...
@media all and (min-width: 661px) {

   #LG { background: url(/i/ALLd.png) no-repeat -3px -185px; }

It all works great - the desktops get an untouched image, and the mobiles get the larger image sized down, so it looks crisp in their higher res screens.


I have a flash AIR desktop app - it's an editor for the website - that has a 480x320 viewport set up in it, into which I load the website page.

The problem is the image for mobile devices gets loaded into the desktop app viewport (which makes sense, as it's under 660w), but because my desktop resolution in only 72dpi, the mobile image gets distorted as it's resized.

I'm wondering if there's a way to load the desktop version of the image into the desktop app's viewport?

I'm going to try setting up the app's viewport to be a unique size, say 483x323, and see if it's possible to set up a third '@media all and' in my css that only looks for 482x323 screens, and loads the desktop version on the image in. I'll have to put it after the first two @media's, and it'll mean the desktop app loads both versions of the image (only displaying one).

Does anyone else have any other ideas how to tackle this?

Thanks for taking a look.