Prepare your website for iPhone X

Last week Apple introduced their new fancy iPhone X. It's screen has a top notch that might cause some problems in landscape mode. Stephen Radford explains how to properly handle it.

The new iPhone X features a beautiful edge-to-edge display. Well, almost. There is the small issue of a notch at the top of the browser which doesn't cause an issue when viewing websites in portrait but by default does cause some issues in landscape.

To accommodate the notch iOS 11 constrains websites within a "safe area" on the screen. On most websites this results in letterboxing on the left and the right.

http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

We've already implemented the fix in our Laravel application template.

Join 9,500+ smart developers

Get my monthly newsletter with what I learn from running Spatie, building Oh Dear, and maintaining 300+ open source packages. Practical takes on Laravel, PHP, and AI that you can actually use.

No spam. Unsubscribe anytime. You can also follow me on X.

Found something interesting to share? Submit a link to the community section.