CSS - Height not being applied on iPhone 6

Question

I have a pretty simple issue but ive spent a lot of time trying to resolve it!

I have a <header> which has a height of 100px.

When a breakpoint it satisfied (targeting mobiles), i want the height to change to 70px.

This is pretty easier via:

header {
  height: 100px;
}

@media (max-width: 768px) {
  header {
    height: 70px;
  }
}

And when testing on a desktop browser - FF, IE, Chrome etc this works fine (when resizing the browser). This is also works fine on an iPhone 4 running iOS 7.1.

However when testing on an iPhone 5, 5s and 6.. The change the 70px has clearly not been applied leaving a 100px <header>

I'm using SASS and a MIXIN to create my breakpoints:

@mixin breakpoint($point) {
    @if $point == largedisplay {
        @media (max-width: 1200px) { @content ; }
    }
    @else if $point == default {
        @media (max-width: 980px) { @content ; }
    }
    @else if $point == tablet {
        @media (max-width: 768px) { @content ; }
    }
    @else if $point == mobile {
        @media (max-width: 480px)  { @content ; }
    }
    @else if $point == custom {
        @media (max-width: 1030px)  { @content ; }
    }
}

Here's a plunker ive made: http://plnkr.co/edit/blufimw09mX52Kx5JEVW?p=preview

I am able to replicate the issue by accessing the link above through the embedded view: http://embed.plnkr.co/blufimw09mX52Kx5JEVW/preview

And there is clearly a difference between the header height on iPhone 4 and 6

Any help would be appreciated!

Update:

A bit of Google-ing suggests it could be an issue with my viewport, here's whats in my HTML:

<meta charset="utf-8">
<meta content="width=device-width" name="viewport">

score 1 · Answer 1 · edited May 23 '17 at 12:24

1

use @media only screen or @media screen to get it working

or check out this link: iPhone 6 and 6 Plus Media Queries

edited May 23 '17 at 12:24

Community

1
1

answered Mar 03 '15 at 09:27

naman kalkhuria

404
4
8

Thanks, so how would that look in my example above? – Oam Psy Mar 03 '15 at 09:34
look? from what i understand i phone 6 is bit quirky with media queries. – naman kalkhuria Mar 03 '15 at 09:36
doesnt really work - created a fork here: http://plnkr.co/edit/iKOMblkMejA9h0OAehCN?p=preview and added the query you suggested and also changed the background-color to double check the query is applied for red... Background is always grey. – Oam Psy Mar 03 '15 at 09:47
u have not added class in media query .. check you code again their.... i tested it and it works – naman kalkhuria Mar 03 '15 at 09:54

CSS - Height not being applied on iPhone 6

1 Answers1