Showing virtual keyboard on responsive design mode both in Safari and Chrome

Question

I'm developing a responsive web app with a complicated UI. In order to demonstrate changes that I made, I'm checking out on responsive design modes both in Safari and Chrome. Is there any way that I can simulate keyboard appearing when I clicked on an input element as it occurs in a mobile Safari/Chrome.

For example, I pick iPhone X in responsive design mode in Chrome and Safari. Since the keyboard doesn't pops up when I click on an input, the scrolling behaviour is different than the experience on an iPhone device. In order to see the results of my change I need to deploy it to a server each time.

Is there a way to pop up the keyboard in responsive design mode?

Answer 1

After trying a bunch of solutions, I finally ended up with using Xcode iPhone simulators. I do the debugging with binding simulator and Safari developer console on my Macbook. If you select IO/Keyboard/Toggle Software Keyboard, then you would be able to see how your design might look on an iPhone when keyboard is visible.