Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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).

like image 712
trusktr Avatar asked Oct 17 '16 00:10

trusktr


People also ask

How do I use responsive design mode in Safari?

Click Safari → Preferences, and then click the Advanced tab. Enable the Show Develop menu in menu bar option in the Preferences dialog box. One that is enabled, go to the Develop menu on the Safari menu bar. Click Enter Responsive Design Mode.

How do I emulate touch events in Chrome?

Click the cog icon to open up it's settings. Then switch to the Overrides tab. Make sure Enable is checked and then activate Emulate touch events. You're done.


Video Answer


2 Answers

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

Search Simulator through Spotlight

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

iPhone 5 with iOS 10.1

Stackoverflow opened through Simulator

like image 112
Davide Mancuso Avatar answered Sep 20 '22 22:09

Davide Mancuso


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.

like image 36
Pier Avatar answered Sep 18 '22 22:09

Pier