после масштабирования, исправить размер для конкретного элемента

когда я просматривать сайт на моем телефоне, я могу предотвратить изменение размеров/масштабирование с

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

однако, я хочу быть в состоянии изменить размер, но это возможно, чтобы сохранить некоторые элементы фиксированного масштаба?

в принципе, если у меня

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

когда я зум в на телефоне, "содержание" будет увеличивать как обычно, но заголовок остался бы фиксированный размер. шрифт для заголовка могут быть одинакового размера, выглядят одинаково и т. д.

там слишком много текста для меня, чтобы рассмотреть возможность использования изображений в качестве альтернативного варианта.

user-scalable=no

в принципе, я хочу иметь вещи для конкретных элементов.

подходы в js/jquery и все ок, и да, я знаю, что одним из решений является, чтобы пойти об изменении размеров все вручную, или делать все в процентах, но это некрасиво и не то, что я ищу.