Apple Shares Tips on 'Designing Websites for iPhone X'

Apple Shares Tips on 'Designing Websites for iPhone X'

Posted by · 9055 views · Translate
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


Apple Shares Tips on 'Designing Websites for iPhone X'

Apple Shares Tips on 'Designing Websites for iPhone X'
MyOpinionCounts - September 26, 2017 at 6:47am
The notch was and is a terrible idea, plain and simple. It’s an engineering failure to implement new functionality in a way that respects the basic principals of good design. So engineering failed and now expects software to provide a stupid “patch” to make the phone usable. This goes against one of Apples core principles of providing visual and functional harmony between hardware and software. The iPhone X notch is an embarrassment and Apple’s top priority should now be to get rid of it. This is what happens when you “chase” instead of “lead” in this industry. Other companies forcing Apple to ship half baked ideas just to keep pace with the competition who are innovating at the pace of market demands instead of following slowly behind the pack as Apple has done in recent years.
Me - September 23, 2017 at 9:28pm
I dislike lots of things that Apple does and how it does them. Still it's ways better than anything out there. The Notch and round bezels actually are hate-cute things for me. And since I'm not even considering 8/8 they can have my money today.
ASD - September 23, 2017 at 12:06pm
Ugly as F***
Jake Allen - September 23, 2017 at 1:55pm
You said, to yourself as you looked in the mirror.
You're a moron - September 25, 2017 at 10:38am
Really? A juvenile comeback? It is effin ugly, & can't even use the full screen it's supposed to have. Far worse than the new Galaxy line. Stupid design by a stupid & cheap company.
2 More Comments
Recent