Рассмотрим следующий метатег 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.
Спасибо