jQuery или Javascript Имитация мобильных двойных вкладок изменить размер экрана

Question

ОБНОВЛЕНИЕ НИЖЕ:

Мне нужна помощь с вызовом DoubleTap на мобильных устройствах, который изменит размер содержимого экрана, чтобы вместить все на странице.

Не объясняя всех подробных причин, по которым мне это нужно, я скажу, что вызываю скрипт, который обновляет фотографию, но делает ее СЛИШКОМ БОЛЬШОЙ.

Пользователи могут решить проблему с размером, просто дважды щелкнув документ.Как только пользователи дважды щелкают по документу, он изменяет размеры как на Android, так и на мобильном телефоне, если он выходит за пределы экрана ... но я хотел бы сделать это для них, чтобы им не приходилось делать это ради удобства.

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

1-е изображение ниже показывает, как выглядит страница после вызова скрипта, и заставляет изображение исчезать с экрана.Второе изображение показывает, как оно будет выглядеть после того, как пользователи дважды щелкнут по документу, чтобы изменить его размер.Я хотел бы сделать это автоматически для них.

ПРИЧИНА, ПОЧЕМУ Я НЕ МОГУ ИСПОЛЬЗОВАТЬ CSS ИЛИ Адаптивное изображение.Код накладывается на два изображения и создает рамку профиля.Если я изменю его размер или играю с CSS, то при рендеринге окончательное изображение будет испорчено.Я испробовал все эти варианты часами.Моя единственная мысль, что, может быть, я смогу смоделировать функцию МОБИЛЬНОГО ДВОЙНОГО ЩЕЛЧКА НА ДОКУМЕНТЕ, ЧТОБЫ ИЗМЕНИТЬ РАЗМЕР.Это вообще возможно?

Спасибо

ОБНОВЛЕНИЕ: Я обнаружил, что css zoom: 80% и т. Д. Будет работать.но теперь мне просто нужно рассчитать процент увеличения на основе того, насколько велика картинка.Изображение всегда будет иметь 512 ширину.Как получить процент от ширины экрана по сравнению с 512px и т. Д.

Answer 1

Чтобы получить масштаб в процентах, основанный на ПОС и ширине устройства:

let picWidth = $('#my-img').width();
let deviceWidth = $(window).width();
let zoom = (deviceWidth / picWidth) * 100;

Если устройство имеет 410 пикселей, а изображение 512 пикселей, масштаб будет (410/512) * 100 ~ 80%. Просто убедитесь, что ширина картинки не равна 0.