Увеличить определенный элемент на webcontent (HTML, CSS, JavaScript)

Я хочу масштабировать только определенный элемент моего сайта (определенный div), если пользователь увеличивает масштаб веб-сайта на мобильном устройстве. На следующем рисунке показана моя идея:

Как вы можете видеть, тест масштабируется, но верхний div остается одного размера; только div, содержащий тест, масштабируется/масштабируется.

Может ли кто-нибудь дать мне несколько советов о том, как достичь этого? Я действительно не знаю, с чего начать.

UPDATE: http://jsfiddle.net/WyqSf/. если бы я увеличил масштаб на этой странице, он масштабировал бы оба элемента. Я хочу настроить только элемент контента при масштабировании. Один из способов, который я могу придумать для достижения этого, - это получить пользовательский ввод и использовать javascript для настройки ширины div, но это противоречит обычному поведению.

Псевдо-код:

container.mousemove {
   content.changeWidth();..
}

Ответ 1

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

Фиксация видового экрана происходит в элементе head вашего html:

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

вы должны использовать hammer.js для обнаружения жестов "щепого зума", а библиотека дает вам очень подробный объект event.gesture, который вы можете использовать для определения того, насколько быстро он масштабируется.

Изменение расстояния между двумя касательными точками при защемлении представлено event.gesture.scale(см. документацию по молоту), если масштаб увеличивается, увеличьте текст соответственно... если он уменьшает уменьшение размера текста. Используйте Math:

$('body').hammer().on("pinch", function(event) {
    console.log(event.gesture.scale);
    // do math...
});

Я думаю, вы поняли, что...

Ответ 2

Вы можете использовать плагин Zoomooz. Внутри документации проверьте раздел Масштабирование внутри контейнера - это то, что вам может понадобиться:

<div class="zoomViewport">
    <div class="zoomContainer">
        <div class="zoomTarget">Target 1</div>
        <div class="zoomTarget">Target 2</div>
    </div>
</div>

Проверьте скрипт JS