6

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.

u_mulder
  • 54,101
  • 5
  • 48
  • 64
balintpekker
  • 1,804
  • 4
  • 28
  • 42
  • possible duplicate of [Disable zoom on a div, but allow zoom on the page (an alternate div)](http://stackoverflow.com/questions/13886763/disable-zoom-on-a-div-but-allow-zoom-on-the-page-an-alternate-div) – Anonymous Jun 28 '14 at 17:44
  • possible duplicate of [How do prevent text size increase on html/css](http://stackoverflow.com/questions/5704646/how-do-prevent-text-size-increase-on-html-css) – Aguardientico Jun 28 '14 at 17:46
  • on the first link of possible duplicate is about how to make text scale to a div's width, on the second link, they use the `-webkit-text-size-adjust` command, neither of those works for me – balintpekker Jun 28 '14 at 17:50
  • 1
    Previous posts do not really provide a way to overcome zooming issues. Whoever thumbed this post down should thumb it back up! – DRD Jun 28 '14 at 18:15

1 Answers1

9

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;
}
DRD
  • 5,557
  • 14
  • 14