0

I have two different media queries, for iPhone and browser. But the iPhone don't work. The sequence is first browser and then iPhone in the style sheet. When i check the site on iPhone and inspect its shows the queries from browser, not from iPhone. What to do??

I saw this: iphone-6-and-6-plus-media-queries, But what i want is not there.

Browser:

@media only screen and (max-width: 640px) {
    #my_div li a img {   height: 51% !important;   top: 19% !important;}
}
@media only screen and (max-width: 360px) {
   .....
}
@media only screen and (max-width: 320px) {
   .....
}

iPhone:

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    #my_div li a img { height: 31% !important; top: 14% !important;}
}
Community
  • 1
  • 1

2 Answers2

0

If you want to target Iphone 6 use;

@media only screen and (min-device-width : 375px) and (max-device-width : 667px)

add orientation only;

and (orientation : landscape) OR and (orientation : portrait)

For Iphone 6 plus use;

@media only screen and (min-device-width : 414px) and (max-device-width : 736px)

I think at your case -webkit-device-pixel-ratio is the reason of it not working.

Demeter Dimitri
  • 608
  • 8
  • 17
  • No luck, Is it the problem that i also have some queries for 360px and 320px?? –  Jun 14 '16 at 06:15
  • Which one comes first at your code ? Change the locations of the queries, write the one you want most to end of your css file. – Demeter Dimitri Jun 14 '16 at 06:21
  • I wrote the iPhone queries at the end of the file, but when i inspect from iPhone device from my browser its not showing the queries for iPhone.... –  Jun 14 '16 at 06:29
  • Remove all the other media queries and try it that way ? If still doesn't work share a code snippet with me – Demeter Dimitri Jun 14 '16 at 06:57
  • Removing all the queries does not any solution i think. I need them also. –  Jun 14 '16 at 07:43
  • Just try and see if it is working. You are not making any sense by saying the media queries are not working. Maybe it is working but you have another css that overrides them all.. – Demeter Dimitri Jun 14 '16 at 08:30
  • As i told **When i check the site on iPhone and inspect its shows the queries from browser, not from iPhone.**, its not appear in the debug mode. –  Jun 14 '16 at 08:35
  • Did you try cleaning the cache ? – Demeter Dimitri Jun 14 '16 at 08:49
0

where is the code for the iphone in the your css? because if it is above the code for the browser your browser code will write over it. if this is the case then you only need to turn it around.

LeondenBoer
  • 49
  • 11
  • Why overrides come out?? as i earlier said that **When i check the site on iPhone and inspect its shows the queries from browser, not from iPhone.** –  Jun 15 '16 at 01:03