0

I'm trying to use media queries, however they aren't working when I go to my iPhone. When I resize my browser window it works fine though. They look like the following:

@media (max-width: 480px){...}

And I've including the following meta tag at the top of the file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Any idea why it wouldn't be working properly?

Kunj
  • 1,980
  • 2
  • 22
  • 34
frog1944
  • 245
  • 5
  • 13

1 Answers1

0

EDIT

Try this:

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

You can use this as reference for iPhones.

RockMyAlgorithm
  • 516
  • 1
  • 4
  • 14