2

for Ipad mini(non-retina):

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1)

for Ipad 3&4(retina):

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)

but how about Ipad mini with retina display?

Vincent Chua
  • 969
  • 6
  • 20
  • 41
  • It the same as the iPad 3&4. Since the iPad has the resolution as a normal iPad. Just a smaller screen. – rckoenes Apr 01 '14 at 08:38
  • My client is requesting a different style on ipad normal and ipad mini. Since the actual device for ipad mini is smaller. If I use back the media query for ipad 3&4 on mini(retina) then it will serve the ipad normal style within the mini(retina), which is not consistent when switching between the retina and non-retina version in mini. – Vincent Chua Apr 01 '14 at 08:56
  • To you site an iPad mini is the same as a normal iPad. – rckoenes Apr 01 '14 at 09:05
  • 2
    Also the first media-query is also used for the iPad 1 and 2, which do not have retina displays. So you are already break the experience on those devices. – rckoenes Apr 01 '14 at 09:14
  • oh ya, I didn't notice that until you mention it – Vincent Chua Apr 01 '14 at 09:24
  • 1
    @rckoenes You should post an answer, since your comment solved the problem. – sargas Sep 18 '14 at 23:35

0 Answers0