Designing for mobile is sometimes pretty frustrating. (ESPECIALLY html emails) So have you ever just wanted to right click your phone and find out what’s happening with the CSS? OR ‘Inspect Element from iPhone’? I have, many times and finally found out a way how. I found a quick tutorial online but it was missing a few steps that I had to figure out on my own so I wanted to lay out it step by step for anyone else who is interested.
You need to have an iPhone and a Mac and use Safari on both devices. Here we go…
▲ Step 1: Plug your iPhone into your Mac computer.
▲ Step 2: On your iPhone go to Settings > Safari > Advanced
▲ Step 3: Turn on ‘Web Inspector’
▲ Step 4: On your Mac computer, in a Safari browser in ‘Advanced Settings’ check the ‘Show Develop menu in menu bar’
▲ Step 5: Go to a site on your iPhone using the safari browser. Open the Develop menu and choose the site you opened in the menu. If it doesn’t show up try refreshing.
▲ Step 6: The inspector will show up and you can adjust the html and css as you do on your desktop but the changes will show on your iPhone.
That’s it! Hope that helps 🙂
