Why does this media query not work for my iPhone? - ios

Question

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.

Answer 1

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.*/
}