Добавление масштабируемого изображения div в немасштабируемое окно просмотра на мобильных устройствах

Рассмотрим следующий метатег viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />

Содержимое на странице не является масштабируемым и мобильным. Иногда мне нужно наложить большое изображение поверх него и разрешить пользователю увеличивать масштаб изображения.

#overlay_div {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #dddddd;
    z-index: 550000;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

<div id="overlay_div">
    <img src="largeimage.jpg" width="100%">
</div>

В настоящее время я знаю два возможных варианта:

• Программно изменить метаданные в окне просмотра, чтобы разрешить масштабирование пользователя (возможные последствия для браузера, также вызывает недопустимое масштабирование содержимого под шкалой).
• Используйте hammer.js для ручного управления событием пинча и соответствующим образом масштабируйте div/изображение (кажется, очень сложные возможные последствия для совместимости).

Кто-нибудь знает правильный способ сделать это, особенно для кросс-браузерной совместимости? Я надеюсь, что может быть простое решение CSS.

Спасибо

Ответы

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