Responsive CSS v. Chrome's Responsive View

Question

I'm working on a page template with a header at the top of the page. Nothing complex:

<div class="top-header">
text
</div>

.top-header {
    width: 100%;
    height: 50px;
}

In Chrome, that produces what I expected...a bar across the top 50px high and as wide a my viewport. Resizing my browser changes with width, but not the height, which is fixed at 50px.

However, using Chrome's Developer Tools, I realized that when viewing in responsive mode, the header resizes vertically. In essence, there's a level of full-page zoom going on.

What key concept am I missing here? I assume it might be a zoom property on the body. How to I ensure that my header is 50px on all devices?

Screen shots:

Top is using Chrome's responsive mode, bottom is simply resizing Chrome to the same width not using responsive mode.

ncardeli ncardeli · Accepted Answer · 2017-10-13T18:19:50

You are probably missing the viewport meta tag, to control the layout on mobile browsers.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

From Apple's documentation:

Safari on iOS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iOS. Configuring the viewport is easy—just add one line of HTML to your webpage—but understanding how viewport properties affect the presentation of your webpages on iOS is more complex. Before configuring the viewport, you need a deeper understanding of what the visible area and viewport are on iOS.

This other anwser does a very good job explaining why you need to specify it: Is the viewport meta tag really necessary?

Responsive CSS v. Chrome's Responsive View

1 Answers