Keeping text size the same on zooming

Question

I want to make a line on the top of the page that can't be zoomed. Neither the line, nor the text contained in it. The main problem is the text. Whenever I zoom in my browser, the line stays the same height, but the text in it grows, and goes out from the line.

Is there any css command what I can use?

I've already tried font-size-adjust: none; and -webkit-text-size-adjust: none; but none of them worked.

Here is a fiddle what I've tried to do.

Answer 1

You actually can get around zooming by using viewport units. Here's the fiddle: http://jsfiddle.net/TnY3L/. Also, I did my personal website using viewport units and no zooming works on it when you use Ctrl + or Ctrl - keys (see http://www.functionalcss.com/). Older browsers do not support vw, vh, vmin, vmax. I got around it by using a polyfill: http://html5polyfill.com/

HTML:

<div id = "header">This is a header</div>

CSS:

#header {
    background-color: #ccc;
    height: 10vh;
    line-height: 10vh;
    font-size: 5vh;
    text-align: center;
}