Want to ensure that your website & web application works across different screen sizes and devices? One of the must-dos is to check that it works well on iPhone Safari(as you know, people tend to stick with the defaults and one does not simply tell the user to download another web browser .-.).
Here's how I debugged a display issue on my website and hopefully it will save you some time when sh*t happens :)
- Problem: something wrong with your website, perhaps due to CSS or JS, but you don't know why.
- iPhone with Safari
You may be testing your website on your iPhone Safari browser, you realized something is wrong and you want to access the debug console to check any relevant error messages. One available tool is Inspect(not affiliated, just something that worked)
- Create an account (free 30 days trial)
- Download the installer for your OS
- Setup and connect your iPhone according to the instructions given
After setting it up, I was able to discover an error message in my debug console:
"ResizeObserver loop completed with undelivered notifications"
...Which I have no idea what that means. So, what else can be done?
If the above does not solve your problem, you might want to find out if you have accidentally introduced a CSS feature that is not yet supported.
To do this, you may want to search for the feature on caniuse. Here is how I found out that the
CSS property: aspect-ratio is not fully supported on all iPhone Safari:
- Check caniuse CSS property: aspect-ratio
Check your iPhone Safari Settings (as you will see, there are a ton of properties and features that are experimental and not enabled by default)
Cry over hours of wasted time
That's all. Go back to coding...