You've design a beautiful website that functions and displays fine on your desktop and on the virtual mobile devices from tools like Responsive Web Design Tester Chrome extension. You deploy it and visit the site on your physical only to discover that some elements don't align or the footer isn't sticky as you expected. You can review your code, do some fixes and redeploy the code and check on your phone again and again until the issue issue is fixed or you can follow these steps to inspect the elements of your site as it appears on your Safari mobile browser.
First, connect your iPhone to your computer
Now, open the Safari browser on your machine and go to the menu bar at the top of the screen and click on Safari > Preferences. A dialog will open
Click on the Advanced tab and check the Show Develop menu in menu bar option and close the dialog box
In you check your Safari menu bar at the top of the screen, you should see Develop
Unlock your iPhone, open Safari and go to your website
Return to your computer, with Safari still selected, click Develop > mouse-over your iPhone's name > your website
The Safari web inspector will open and you should be able to select elements and see your selection on your iPhone in realtime
If you see a message telling you to enable web inspector on your phone, follow these steps:
Open the Settings app > tap Safari > scroll to the bottom > Advanced > enable Web Inspector
Happy debugging!