CODEWITHSUNDEEP
ioscssiphone
shurup
shurup

Reputation: 871

Why does this media query not work for my iPhone?

I used iPhone 6 and 4 to check if another stylesheet is being applied. It did not. Here are my stylesheets: 

<link rel="stylesheet" media="screen and (max-width: 800px)" href="mobileindex.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css">

Yes, there is a gap in them. That space is reserved for tablets later on. For some reason, the mobileindex.css wasn't applied with those settings. I have to switch orientation twice for it to appear. This, however, fixes the problem:

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="mobileindex.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css">

Is 800px not enough for an iPhone 4 and 6? How come it works now? The page where this happened is msolonko.net.

Upvotes: 0

Views: 4612

Answers (1)

Vimal Raiyani
Vimal Raiyani

Reputation: 174

Can you please add the media queries below your main style and after that check your Web Application in your Mobile device.

@media screen and (min-width:768px) and (max-width:1024px) {
   /*Your Mobile Style will be here.*/
}

The main thing is that you are applying the wrong min-width and max-width for iPhone6 device. The real size of the iPhone6 for responsive design is below.

iPhone 6 Portrait

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    /*Your Mobile Style will be here.*/
}

iPhone 6 landscape

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    /*Your Mobile Style will be here.*/
}

Upvotes: 4

Related Questions