Ответ 1
Shift + щелчок мышью и перетаскивание через окно просмотра
Работает для меня. Проблема только в том, что событие touchstart вернет 1 для originalEvent.touches
Как имитировать увеличение зума в Google Chrome?
Я разрабатываю функцию масштабирования для мобильного приложения, написанного на javascript, и я хочу проверить это в Google Chrome с помощью функции эмуляции мобильного устройства. Но я не могу найти способ проверить жест щепотки.
Я попробовал все, что мог найти в Интернете (нажав Shift и передвинув мышь, нажав Alt и передвинув мышь), но ничего из этого не получилось. Есть ли даже "родной" способ в Google Chrome, чтобы имитировать жест жесткого зума?
btw Я использую версию Mac OS версии 59.0.3071.86 для MacOS
Ответы
Ответ 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">
может вызвать проблемы для вас.
Вы также можете масштабировать, используя процент увеличения в верхней части страницы инструментов разработчика:
