Как имитировать увеличение зума в Google Chrome?

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

Я попробовал все, что мог найти в Интернете (нажав Shift и передвинув мышь, нажав Alt и передвинув мышь), но ничего из этого не получилось. Есть ли даже "родной" способ в Google Chrome, чтобы имитировать жест жесткого зума?

btw Я использую версию Mac OS версии 59.0.3071.86 для MacOS

Ответ 1

Shift + щелчок мышью и перетаскивание через окно просмотра

Работает для меня. Проблема только в том, что событие touchstart вернет 1 для originalEvent.touches

Ответ 2

Жесты пинча имеют разных слушателей в разных браузерах, но есть выдающаяся облегченная библиотека с именем hammer.js, которая обрабатывает пинч, пролистывание и.... довольно легко и хорошо во всех браузерах, к сожалению, она не поддерживает Desktop Chrome, поэтому вы не можете отлаживать Ваши веб-мобильные коды легко,

Нажатие и перетаскивание Shift-Mouse на рабочем столе Chrome с библиотекой молотков также не работает нормально, оно активирует событие Pan Pan вместо сжатия и работает только один раз! После этого оно продолжает вызывать событие Pan, когда вы перемещаете мышь через окно просмотра, что довольно раздражает и делает отладку невозможной.

Решение: Единственный известный мне способ проверить свои жесты в мобильном браузере - это использовать соединение Safari с Safari на устройствах ios/osx или соединение Chrome с Chrome для устройств Android.

Я использую для отладки свои JavaScript-коды с помощью Chrome DevTools, но в веб-мобильных проектах я использую Safari Web Inspector, потому что у меня есть iphone и Mac !. Вы также не можете отлаживать устройство ios с помощью Desktop Chrome.

Ознакомьтесь с этой статьей, чтобы узнать, как настроить веб-инспектор Safari.

Примечание: вам нужно подключить ваш iphone к вашему Mac с помощью usb-кабеля и включить Web Inspector на вашем iphone (Settings-> Safari → Advanced → Web Inspector) Если вы не видите меню " Разработка" в вашем Safari, перейдите на Предпочтения и на вкладке "Дополнительно" установите флажок "Показать меню разработки в строке меню". остальное объяснено в вышеупомянутой статье.

Обновить

Невозможно отладить устройство ios в Windows Desktop Safari.

Ответ 3

В Chrome 66 в режиме симуляции устройства двойным щелчком мыши перетащите вверх/вниз, чтобы уменьшить/уменьшить.

Ответ 4

В Chrome v.71.xx можно увеличить масштабирование, нажав "Переключить панель инструментов устройства" в инструментах разработчика, а затем, удерживая SHIFT, и перетащив мышью.

Ответ 5

Последний ответ имеет пять отрицательных голосов, но я хочу сказать, что последний браузер Chrome (78) на платформе Android не имеет функции масштабирования. У вас могут быть проблемы с пониманием области просмотра. Масштаб области просмотра - pinchzoom. Если вы установите его так, ваша веб-страница не сможет активировать функцию pinchzoom.

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

Вы можете установить этот путь на своей веб-странице

<meta name="viewport" content="initial-scale=1, maximum-scale=5, minimum-scale=1, user-scalable=yes">

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

Ответ 6

В Mac OS вы можете использовать два пальца на сенсорной панели для имитации увеличения зума.

Возможно, проверьте настройку видового экрана в метатеге:

<meta name="viewport" content="initial-scale=1">

Добавление тэга maximum-scale к метатегу просмотра может повлиять на масштабирование:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

может вызвать проблемы для вас.

Вы также можете масштабировать, используя процент увеличения в верхней части страницы инструментов разработчика: