如何在谷歌浏览器中模拟捏缩？

我正在开发一个用 javascript 编写的移动应用程序的缩放功能，我想在 Google Chrome 中用移动设备模拟功能来测试这个功能。但我找不到办法测试捏手势。

我试了所有我能在互联网上找到的东西(按 Shift 键和移动鼠标，按 Alt 键和移动鼠标) ，但都没有用。在谷歌浏览器中有没有一种“本地化”的方式来模拟缩放手势？

顺便说一下，我使用的是 MacO 版本的 Google Chrome 59.0.3071.86

73852 次浏览
小开

With Mac OS you can use two fingers on the touch pad to simulate pinch zoom.

Maybe check the viewport setup in the meta tag:

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

Adding a maximum-scale to the viewport meta tag might influence the zoom:

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

might be causing a problem for you.

You should also be able to zoom using the zoom percentage at the top of the developer tools page:

Dev tools zoom

小开
最佳答案

Shift + mouse click & drag across the viewport

Works for me. Only problem is that the touchstart event will return 1 for originalEvent.touches

小开

Pinch gestures have different listeners in different browsers but there is an outstanding lightweight library named hammer.js which handles pinch,swipe and .... pretty easy and fine in all browsers, Unfortunately it does not support Desktop Chrome, so you can not debug your web-mobile codes easily,

Shift-Mouse click&dragging on Desktop Chrome with hammer library also does not work fine, it activates hammer's Pan event instead of pinch and works just once!, after that it keeps calling Pan event when you move your mouse through your viewport which is quite annoying and makes the debug impossible.

Solution : The only convenient way, that I know, to test your gestures on a mobile browser is to use either Safari to Safari connection on ios/osx devices or Chrome to Chrome connection for android devices.

I use to debug my JavaScript codes with Chrome DevTools but in web-mobile projects I use Safari Web Inspector, because I have an iphone and a Mac!. you also can not debug your ios device with Desktop Chrome.

Take a look at this article to find out how to setup your Safari Web Inspector.

Note: you need to connect your iphone to your mac using usb-cable and enable Web Inspector on your iphone (Settings-> Safari -> Advanced -> Web Inspector) If you are unable to see Develop menu on your Safari, Go to Preferences and in Advanced tab check "Show develop menu in menu bar". the rest are explained in the above mentioned article.

Update

It is not possible to debug an ios device on a Windows Desktop Safari.

小开

On Chrome 66, while in device simulation mode, double-click-drag up/down zooms out/in.

小开

On Chrome v.71.x.x, you can pinch zoom pressing 'Toggle Device toolbar' at dev tools and after hold SHIFT and click-drag your mouse.

小开

The last answer has five negative votes, but what I want to say is that the latest chrome browser(78) on Android platform does not have the function of zoom. You may have some problems with your understanding of viewport. The scale of viewport is pinchzoom. If you set it like this, your web page cannot trigger pinchzoom.

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

Your can set this way in your webpage

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

The other answers have already said that shortcuts for pinch zoom.

小开

Another solution to this for testing. Use the chrome phone simulator + fake a second touch at point 0,0:

function handleTouchStart(e) {
var touches=e.targetTouches;
touches=[{pageX:touches[0].pageX,pageY:touches[0].pageY},{pageX:0,pageY:0}]; //Comment this line out for production
//now use the touches variable as the list of touches.
小开

If you have a mobile device on hand, you can connect the device to your desktop compute and use the Remote Devices feature to debug your phone on your desktop.

For Android:

  1. Enable Developer Mode and USB Debugging.

  2. On your desktop go to DevTools and click on More Tools > Remote Devices under the three dot menu

  3. Check the Discover USB Devices option. You'll see an authorization popup on your phone. Allow it and continue.

  4. Open Chrome on your phone and you should be able to inspect all the tabs on your phone. As a bonus you can use port forwarding to forward your desktop localhost to the device's localhost so if you're running a dev application on your desktop you can debug it on mobile.

For iPhones: I'm not too familiar with the details here because I haven't been able to try it out myself but I believe you can enable it through chrome://inspect and Start Logging.

Source: https://dev.to/dev0x0/using-google-chrome-console-on-any-mobile-device-9ec

小开

This may not be a developer answer. I've been having problems with enlarged web pages. then the page is broken. Many web pages do not support normal zoom. Mouse Pinch-To-Zoom can be used with the general web.


提交答案