Media Query Not Working for iPhone and Ipad

Responsive design - Media Query not working on iPhone?

Do you have the meta for view port in your html?

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

More info here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

Media query is not working for 768px ipad portrait

For iPads in portrait mode it is generally best to be more specific in the media queries, so try something like this:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    /* Styles Here */
}

This way you target devices with screen width between 768px and 1024px which is what the iPad is, then you filter your targets by specifying the orientation as portrait.

You could try something like this - reducing the max-width - to minimize any other screens that it could effect, but I haven't tried it so can't verify it works.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 770px) 
and (orientation : portrait) { 
    /* Styles Here */
}

Media Query not working for iPhone and iPad

Excerpted from https://mislav.net/2010/04/targeted-css/

You should be aware that orientation media query, although supported on the iPad, doesn’t work on the iPhone (tested with v3.1.3). Fortunately, size queries like width and device-width work, so layout-switching is possible without JavaScript with some combination of those.

@media queries not working on my iPad

Your problem is likely the virtual viewport that some devices provide. The viewport is larger than the physical screen and content is scaled down by the browser. If you want to work in device pixels you need to add a meta tag

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

This tells the browser to set the viewport to the same size as the device with no pixel scaling.

Why does this media query not work for my iPhone?

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