0

I am using media queries on my website to deliver alternative content for the following:

• Ipad 2, 3, & 4

• Iphone 3, 4, and 5

• Android

My css code is as follows:

@media screen and (min-width: 480px) and (max-width: 900px) {
/* Content for ipad */
}

@media only screen and (max-width: 480px){
/* Content for iphone */
}

Using the above css media queries works perfectly in all the flavours of ipad and iphone. However I am confused about Android devises that use high resolution screens of 400x800. The results I get for Android 400x800 is that when viewing in portrait mode I get perfect results, but when viewing in landscape mode I get the ipad content....Therefore the 400x800 Android device is catching the ipad media query in landscape mode....So my questions are as follows:

  1. How do I successfully target Android 400x800 (whilst still using ipad media queries)?
  2. Also how to I target standard definition Android devices (are my iphone media queries sufficent for this)?
AndreyAkinshin
  • 18,603
  • 29
  • 96
  • 155
user2212666
  • 1
  • 3
    Why would you target specifically android or iphone ? If you really need to, using the size isn't the right solution. – Denys Séguret Mar 26 '13 at 17:47
  • 1
    This might hold a solution for you: http://stackoverflow.com/questions/12539697/iphone-5-css-media-query –  Mar 26 '13 at 17:52
  • Hi Dystroy....I dont want to specifically target android or iphone...All I want is my mobile content to be delivered in iphone and android irrespective of screen resolution...At the moment Android devices with 480x800 are showing my ipad media queries....I need to know how to get Android 480x800 to deliver my mobile content instead of ipad content........Thanks for your help! – user2212666 Mar 26 '13 at 18:13

1 Answers1

0

Is your meta viewport accomodating dpi?

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
Jason Lydon
  • 7,074
  • 1
  • 35
  • 43