CODEWITHSUNDEEP
ioscssiphoneresponsive-designmedia-queries
user7280974
user7280974

Reputation:

iPhone ignores media queries

I have a problem with my media queries. I finished my responsive website and everything was ok on desktop, Android and Windows Phone devices. I asked my friends to check if it's ok on their iPhones and I got supriesed, because their iPhones (with iOS 10) are ignoring my media queries.

How it's possible? Problem is only on iPhones (5,5s,6,6s+). When I scale website in Chrome, everything is fine.

I have meta viewport tag in my head section.

This is my media query:

@media (min-device-width: 220px) and (max-device-width: 480px)
{
  /*my styling*/
}

Upvotes: 1

Views: 2903

Answers (3)

necilAlbayrak
necilAlbayrak

Reputation: 814

can you try using min-width and max-width instead of device width. sometimes device-width does not match viewport.

@media screen (min-width: 220px) and (max-width: 480px)

do you even add meta tag like that can you check it ?

 <meta name="viewport" content="width=device-width">

Upvotes: 1

Autista_z
Autista_z

Reputation: 2541

@necilAlbayrak is right. Here you have correct media queries for iphones

/* ----------- 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) {

}

/* ----------- iPhone 5 and 5S ----------- */

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

}

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

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

}

/* ----------- iPhone 6 ----------- */

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

}

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

}

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

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

Source: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Upvotes: 3

Itay Ganor
Itay Ganor

Reputation: 4205

try : (added screen)

@media screen (min-device-width: 220px) and (max-device-width: 480px)
{
  /*my styling*/
}

PLUS, add this to your HTML in every responsive page:

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

Upvotes: 2

Related Questions