How do we emulate touch events in Safari Responsive Design Mode?

Question

Chromium has this feature Device Mode, and interaction is how it would be on a touch device.

I've tried Safari's Responsive Design Mode, but I don't see a way to emulate touch (without pointer events). It just behaves like I'm using a mouse, but I'd like for it to behave like I'm touching the screen on a mobile device (like in Chrome's inspector).

Solution 1

You can install Apple xCode. After installation, search Simulator through Spotlight.

With Simulator you can open Safari and simulate yours websites with touch control.

Solution 2

You can't. When using Safari on desktop in responsive mode your mouse will only generate mouse events.

Maybe a better solution for your use case than using the Simulator is to use Chrome desktop. When using the dev tools in device mode it will emulate tap events.

Comments

[Gio]

While this is definitely usable, I don't think it's a valid way to test web games for example, because of the drastic performance decrease. There should be a built-in feature for this like Chrome has.

[trusktr]

True, but then it is hard to test in actual Safari without an actual mobile device. Though, testing in an actual mobile device is probably the most accurate way to test.

[K. Kilian Lindberg]

I'm amazed if that's still the case - but hmm a workaround for a javascript snippet would be easy for the touchstart/end - although the behavior of the "touchmove" compared to "mousemove" introduces more complexity. After a reflection - I guess the iPhone-simulator is optimal in many ways

[Dmitriy]

Safari has different support and behaves differently sometimes than Chrome - so I feel like this is a bad answer

[Pier]

I guess it depend on the use case. I haven't seen any differences for touch start/end/move events. Do you have any info on those differences?