CODEWITHSUNDEEP
htmlcss
balintpekker
balintpekker

Reputation: 1844

Keeping text size the same on zooming

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.

Upvotes: 6

Views: 22526

Answers (2)

konieckropka
konieckropka

Reputation: 469

Small explanation to answer given by @DRD - this is the worst solution possible.

Never use vh and vw for font-size property:

This is how @DRD's fiddle example works when changing browser window height. The font-size is getting smaller and bigger with resizing.

Example jsfiddle

Upvotes: 0

DRD
DRD

Reputation: 5813

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;
}

Upvotes: 8

Related Questions