Sometimes it's absolutely horrendous to debug a css/js issue just on iPhone. It's not reproducable on desktop, in responsive view, even not in simulators. But in actual device it'll just wink at you!
Today while playing with Safari Settings on iPhone, I discovered a gem! Probably it was there for long time, but I didn't know. Yes, You can actually inspect Websites on iOS Safari! Yayyyy! 😍
Here's how to do it in step by step:
First you need to setup it on your iPhone/iPad. Go to Settings > Safari > Advanced > Web Inspector, Enable it.
Okay, now on your Mac, Open Safari. You probably already have Develop menu enabled here. If not enabled from Safari > Preferences > Advanced > Show Develop Menu in Menubar, Enable it.
Now connect your iPhone/iPad on your Mac with cable. Open up the website you want to inspect on your iOS Safari. Back to your Mac Safari, In the Develop Menu, Find your iPhone/iPad name. Hover over it, You should see the websites you've opened on your mobile device.
Click on the desired one, it should opne the full blown inspector on your Mac.
Now enjoy bit easier development for iOS. Hope this helps. If you use any other tacticts to inspecting/debugging website on mobile devices, please let us know via comments below.
Note: Safari should be the foremost application on your iOS device to access the list of website.