I've been working on a seemingly simple problem for some time now without success!
The issue involves a <header> element with a height of 100px.
When the screen size reaches a certain breakpoint (specifically targeting mobile devices), I need the height to change to 70px.
Implementing this change is straightforward with the following CSS:
header {
height: 100px;
}
@media (max-width: 768px) {
header {
height: 70px;
}
}
Testing this solution in desktop browsers like Firefox, Internet Explorer, and Chrome works perfectly when resizing the window. The same goes for an iPhone 4 running iOS 7.1.
However, when testing on an iPhone 5, 5s, and 6, the height does not update to 70px as intended, remaining at 100px.
I am using SASS along with a MIXIN to manage 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 link to the Plunker I created for testing purposes: http://plnkr.co/edit/blufimw09mX52Kx5JEVW?p=preview
To reproduce the issue, access the link above via the embedded view: http://embed.plnkr.co/blufimw09mX52Kx5JEVW/preview
There is a noticeable difference in header height between the iPhone 4 and 6.
Any suggestions or assistance would be greatly appreciated!
Update:
After doing some research online, it seems that the issue may be related to the viewport settings in my HTML:
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">