iPhone CSS media queries - ios

Question

I'm currently developing an HTML email and I've written some media queries for the iPhone as follows:
/* ----------- iPhone 6+, 6S+, 7+ and 8+ --------- */
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait)
{
.email-container {
min-width: 414px !important;
}
.email-header{
padding: 1.2em !important;
}
}
Naturally, this media query doesn't get triggered. :-)
Instead, when I add the following styling to the head, it affects the HTML:
/* Nexus 5X, Nexus 6, Nexus 6P, Pixel, Pixel XL, Pixel 2, Pixel 2 XL*/
#media only screen
and (min-device-width : 411px)
and (max-device-width : 731px)
and (orientation : portrait)
{
.email-container {
min-width: 411px !important;
}
.email-header{
padding: 1.2em !important;
}
}
From what I understand and based on a bit of research, link, link, the device dimensions for the iPhone 6+,6S+, 7+ are 414px X 736px.
Why are the media queries for 411px X 731px devices getting triggered?

Answer 1

You have the widths and heights mixed a little. Try the below code
#media only screen
and (max-width : 414px)
and (max-height : 736px)
{
.email-container {
min-width: 414px !important;
}
.email-header{
padding: 1.2em !important;
}
}
The code looks for a max device width and max device height now with orientation as portrait. Which is what your research brought up:
From what I understand and based on a bit of research, link, link, the
device dimensions for the iPhone 6+,6S+, 7+ are 414px X 736px.
Hope this answer works for you.