Upon scaling, fix the size for specific element

Question

When I view my site on my phone, I can prevent it from resizing/scaling with

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

However, I want to be able to resize, but is it possibly to keep some of the elements fixed scale?

Basically, if I have

<header>stuff</header>
<div id="content">
    Content
</div>

When I zoom in on my phone, "content" would zoom in as normally, but the header would remain fixed size. The font for header would be the same size, look the same, etc.

There is too much text for me to consider using images as an alternative option.

Basically, I'd like to have a user-scalable=no kinda thing for specific elements.

JS/jQuery approaches are all ok, and yes, I know that one of the solutions is to go about resizing everything manually, or making everything a percentage, but that's ugly and not what I'm looking for.

Answer 1

Unfortunately, unless you use a custom "scalable area," you cannot keep only certain elements to their original size.

By custom scalable area I mean what libraries like iScroll 5 create. This allows the user to pinch-to-zoom only specific parts of the page, (open on mobile) rather than the whole page like mobile browsers normally do.

By using something like iScroll, you can what you want to be zoomable inside its scalable area and the rest outside of it: that way it will not be scaled.

Either that or, well, what Trendy suggested: manually fix all elements after the scale.