Debugging on iOS safari

Question

I'm making my portfolio website and I'm using pure HTML 5 no .js the about page doesn't work on iPhone and doesn't scroll everything together some of the elements positions are fixed and don't scroll. I don't own an iPhone but is there anyway to simulate the iOS on computer so I can debug the page? And is there such a tool like "inspect element" in chrome on the iOS safari? If not how can I debug and find how the browser is rendering wrong on the phone? Cause I validated my code and it's supposed to work, but its not!

Answer 1

You can simulate iOS using Xcode and Mac OS.

And for the debug purpose there is no inspect element in Simulator. Yes you can take a help of Accessibility Inspector

In the Simulator >> Go to Settings >> General >> Accessibility

Turn on Accessibility Inspector - This will help you to inspect different elements.

Answer 2

Something important to bear in mind is that because of Apple's policies, all browsers must use Safari’s layout engine to render pages, that means there are very few differences in rendering a page between Safari and other browsers on iOS.

There are two methods that you can use to debug a web page running on your iOS device on your using a browser on your Mac or Windows computer:

1. Debug using a Mac

If you have a Mac, you already have tools to live-inspect and debug web pages on your iOS device.

See here: https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html

2. Debug using Windows

Xcode and MacOS are not the only way to debug websites running in a browser on OSX. There's a few ways:

Telerik

WineRE

I personally use Edge Inspect when I'm forced to use Windows.

Adobe Edge Inspect

http://www.adobe.com/devnet/edge-inspect/articles/browser-testing-across-devices-with-adobe-edge-inspect.html