Increasing image size on small screens using ems

[DavidCheshire]

I have been looking for a responsive slider for a while and I was happy to find slippry, I am now replacing all my sliders with slippry.

I noticed that in the demo css you have
@media only screen and (max-device-width: 800px), screen and (max-width: 800px) {
.demo_wrapper {
width: 80%;
}

This works fine to increase the image size if I shrink my desktop browser window to less than 800px, but when I view it on my phone the image is still small, because my phone (an HTC One) has a screen resolution of 1920x1080. I found a better solution was to use

@media only screen and ( max-width: 40em )

I have no idea why this works, I think it may be something to do with the display being automatically scaled when the viewport is set, so that the relationship between ems and hardware pixels is changed. I need to research this more (and test it on more than one phone!) but the discussion here http://alistapart.com/article/a-pixel-identity-crisis/ seems to be relevant.

Thanks for making slippry available!

Kind regards - David

[sftsk]

Hmm, need to look into this a little it might have to do with the way your phone is communicating its screen resolution to the browser.
Adding the em might solve your specific problem but is not really a solution I guess.

Media queries are always a little tricky and I would really like not to have device specific queries because they deal with something in the wrong way.

Will try to simulate this with the Chrome Web inspector when I find time.

Thanks for the feedback!