Media Queries Working On Browser Resize, Not On Mobile - html

Question

I have Googled my problem but couldn't find a suitable solution. Effectively I am building an eBay listing template currently using HTML and CSS - I am using SCSS to generate the stylesheet. I am working on the menu aspect of my template at the minute.
I have set my media query so that on devices with width less than 690px (I'm not using standard queries, I am using breakpoints to suit my content - they are also subject to change), the menu buttons change to a block element and display in a column as opposed to a row (on desktop).
First off, here's the media query I am working with atm - it's a mixin in an SCSS partial file named _media.scss that I import into the main style.scss.
#mixin bp-large {
#media only screen and (max-width: 690px){
#content;
}
}
This is imported into my style.scss file using #import 'media';
Here is the HTML for my menu:
<div class='header'>
<section>
<div class='logo'>
<h2>Company Logo</h2>
</div>
<div class='top-menu'>
<ul>
<li><a href='#'>Store Front</a></li>
<li><a href='#'>Latest Arrivals</a></li>
<li><a href='#'>Featured Picks</a></li>
<li><a href='#'>Feedback</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</section>
</div>
Here is the relevant SCSS:
section {
width: 85vw;
margin: 0 auto;
.header & {
#include bp-large {
width: 60vw;
}
}
}
.logo {
#include bp-large {
text-align: center;
}
}
.top-menu {
background-color: $primary;
text-align: center;
width: 100%;
}
.top-menu ul {
list-style: none;
display: flex;
text-align: center;
flex-direction: row;
#include bp-large {
flex-direction: column;
}
}
.top-menu ul li {
flex-grow: 1;
display: flex;
align-items: center;
background-color: $button-color;
padding: 15px;
border-right: 3px solid $accent-color;
&:last-child {
border: none;
}
&:hover {
background-color: $button-hover;
cursor: pointer;
}
#include bp-large {
display: block;
border-bottom: 3px solid $accent-color;
border-right: none;
&:last-child {
border: none;
}
}
}
I have a GitHub pages set up for my project # http://dannyxcii.github.io/lst-tmp - currently the menu actually does do what it's supposed to do when viewed on a smartphone (after adding the following line of HTML):
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
BUT - the menu is on the left of the page and not fitting the device width initially - the usual 'double tap to center' gets it looking how it is supposed to. Any ideas on how I could fix this?

Answer 1

The thing is the pixel that browser uses is different than the hardware pixels. They use what's called DIP (Density Independent Pixels or Device Independent Pixels).
The new mobile devices come with screen full HD or even more pixel in screen resolution. Example Samsung galaxy s8 has the resolution of 2,960x1,440. As it has width of 14440px, media queries like (max-width:760px) or any other media queries do not work as it max-width is 1440px.
However, to maintain a degree of consistency there are DIPs, DIPs convert you CSS pixel into something that is optimal for viewing your website. For mobile phones, the width in DIP is 320px.
TL;DR: after adding the 'meta viewport' tag, you are telling to the browser to use dips instead of CSS pixel. It treats every mobile as 320px device by mapping 2 or more pixel in higher resolution device to 1DIP.
There is a very short and sweet course, freely provided by Udacity and this goes through meta viewport tagLink to the course. Hope this helps :)