caffinated - 10:13 pm on Aug 21, 2013 (gmt 0)
Yes you're quite right lucy - I should have left the "min" out of the statement.
Here's what I have learned so far...
If I use this:
@media only screen and (max-width: 1000px)
It works on Chrome (v28), Firefox (v23), Safari (v5.1.2) and Opera (v12.10) on my PC. It doesn't work on IE8 but may well work on later versions (I prefer to test on 8 as it is still prevalent).
I have checked it on an iPhone but forgot to ask which version but it was working. It doesn't work on Retina screens.
In order to get it to work on Retina screens I tried this:
@media only screen and (max-width: 1000px) and (-webkit-max-device-pixel-ratio: 1.9)
This still worked on Chrome and Safari (which both use webkit) but this now precluded Mozilla and Opera. To get these two working again, I added the resolution option:
@media only screen and (max-width: 1000px) and (-webkit-max-device-pixel-ratio: 1.9), only screen and (max-width: 1000px) and (max-resolution: 1.9dppx)
So now we have a potential solution. However, as I don't own an iPad, I am relying on my colleague (who is temp indisposed) to inform me of the success of the webkit instruction - I used an on-line emulator and it failed but I'm not going to rely on that. Fingers crossed, the code looks ok to me.
If anyone can spot an obvious error (lucy24 *grin*) please let me know.