Apple Shares Tips on 'Designing Websites for iPhone X'

Apple has posted several tips for developers to help them design websites that look good on the iPhone X.

Your website can make use of a few similar new pieces of WebKit API introduced in iOS 11 to take full advantage of the edge-to-edge nature of the display.


The first new feature is an extension to the existing viewport meta tag called viewport-fit, which provides control over the insetting behavior. viewport-fit is available in iOS 11.

After adopting viewport-fit=cover, the next step is to selectively apply padding to elements that contain important content, in order to ensure that they are not obscured by the shape of the screen. To achieve this, WebKit in iOS 11 includes a new CSS function, constant(), and a set of four pre-defined constants, safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom. When combined, these allow style declarations to reference the current size of the safe area insets on each side.

To deal with a safe area inset of 0px when the iPhone is held vertically, Apple suggests using brand-new CSS functions min() and max() which will be available in a future Safari Technology Preview release.

example: padding-left: max(12px, constant(safe-area-inset-left));


in portrait orientation, constant(safe-area-inset-left) resolves to 0px, so the max() function resolves to 12px. In landscape, when constant(safe-area-inset-left) is larger due to the sensor housing, the max() function will resolve to that size instead, ensuring that the important content within is always visible.

More details at the link below...

Read More