Как при изменении зума пересчитывать размеры блока, чтобы он вмещался во viewport устройства?

Question

[z_u_q]

Есть страничка без адаптива, есть плашка с сылкой на приложение. Когда заходишь на страничку с мобильно, плашка находится сильно внизу и страница призумлена => плашки не видно:



Нужно, чтобы всегда, когда зумиться страница, выглядело так:



Собственно есть идея вычислять при зуме скейл для плашки. Написал метод getScale, а дальше не знаю, как мне при изменении зума пересчитывать размеры блока, чтобы он вмещался во viewport устройства? Помогите, пожалуйста.

Ссылка на пример

Answer 1

[Aetae]

Мб вам нужна просто meta viewport, а не извращаться?

Answer 2

[Иван Табакерка]

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Ну и использовать % для вёрстки ширины блоков и медиа запросы.