Le 19 févr. 2013 à 06:30, "Keith Purtell" <keithpurt...@keithpurtell.com> a écrit :
> I put together the following code that was the same on several CSS > instructional sites. This test should show "1 & 2" when viewed on iPad 1 or > 2, and show "3 & 4" when viewed on iPad 3 or 4. Not working; shows 1 & 2 on > iPad 3. I tried code verification thinking there was a typo, but it > approved everything except the webkit reference, which I expected. > > [….] > @media only screen and (min-device-width: 768px) and (max-device-width: > 1024px) > /* ipad 3 and 4 */ > @media only screen and (min-device-width: 1536px) and > (max-device-width: > 2048px) and (-webkit-min-device-pixel-ratio: 2) It is not surprising this is not working… the device-width media-query works in CSS pixels, not physical pixels. What is the source of your above MQ's? http://www.w3.org/TR/css3-mediaqueries/#units Try this: @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* iPad 1, 2, iPadMini */ } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { /* iPad 3, 4 */ } When in doubt, always check the specs… Philippe -- Philippe Wittenbergh http://l-c-n.com ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
