Try adding this in the <head> tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
I haven’t tested it for your specific case, but it fixed a problem I ran into awhile ago, and it may help with the DPI differences.
Also, when you change the height of the header it will affect the content below it. You’re going to want to modify has-header, as well. See this post: