Mobile view on HTML5 Responsive output

[WriterAndrew]

Hi, I've set up a very simple project with the HTML5 Top Nav output.

I have found a method that "hopefully" anchors the footer to beneath the text (Footer only shows on the home page). This method is based around the info from https://matthewjamestaylor.com/bottom-footer.

When I test the mobile output on my desktop by resizing the browser windows to as narrow as I can get, the layout changes as I expect, with the footer sitting nicely at the bottom of the page.

However, when I view the output on an actual mobile (up-to-date Android, viewing it in Chrome), the footer appears part way down the screen (not at the bottom) and is missing the background color that I see on the desktop version.

Also, I have some h1 text, set to font-size of 2.0em, with a line-height of 1.5em. When I view this on my desktop sized to trigger the mobile media view, the h1 text wraps, but the spacing is a little too much - however, when I view it on a real mobile device, it is as if it is ignoring the line-height, so the different lines of the wrapped text is touching...

Any ideas why I might be experiencing these differences between my "real" and "virtual" mobile devices?

Thanks