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

responsive-design safari web-inspector dom-events safari-web-inspector
trusktr picture trusktr · Oct 17, 2016 · Viewed 11.4k times · Source

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

Answer

Davide Mancuso picture Davide Mancuso · May 31, 2017

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

Related questions

Font scaling based on width of container

I'm having a hard time getting my head around font scaling. I currently have a website with a body font-size of 100%. 100% of what though? This seems to compute out at 16 pixels. I was under the impression that 100% would somehow refer …

Read More
Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1: When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accommodate for …

Read More
Responsive css background images

I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one …

Read More