Live data from Hacker News

Designing Websites for iPhone X

webkit.org

61–70 of 135 posts

Re: Designing Websites for iPhone X

#61
post #28

It would be nice to also expose these CSS features for people with extra rugged cases. Frequently they can't touch the edges of the screen or even necessarily see it all.

I'd like my phone to detect where my thumb is and expose that to the css as a reserved region.

Re: Designing Websites for iPhone X

#63
post #40

What a mess. My condolences to the Apple engineers who had to implement this. The notch is probably something that marketing thinks is really important for branding reasons, but I'd guess most engineers dislike it. Yet some of them had to add all this complexity to their codebase.

Apple's industrial design team has always had more influence and sway over the final product than their OS/developer teams.

Re: Designing Websites for iPhone X

#64
post #41
post #25

Earlier quoted context omitted.

Too bad more people aren't reading this before whingeing in the comments.

Well, except that the default behavior pulls the background color into the irregular areas, which will probably yield some unexpected and less than desired results for sites that don't expect the background color to fill space to the left and right of the content. I think a more sensible default would have been to fill the irregular space with black to create a letterboxed appearance. Basically reduce the irregular s…

After a bit of experimentation, this seems to work to create a letterbox (really pillarbox) effect, as long as you don't add their new viewport-fit property.

  html {
    background-color: black;
  }

Re: Designing Websites for iPhone X

#65

Earlier quoted context omitted.

The current consensus among browser implementors is that, on the whole, prefixed properties have hurt more than they’ve helped. So, WebKit’s new policy is to implement experimental features unprefixed, behind a runtime flag. : https://webkit.org/blog/6131/updating-our-prefixing-policy/ As the article states, prefixes have created a set of problems, which is why Apple, Google, Mozilla and Microsoft stopped using them…

But the things they added aren't behind a runtime flag, but enabled by default and without any prefix, yet not standardized.

Because these specs are in progress at the W3C, so they don't need to be prefixed or hidden in some way: https://news.ycombinator.com/item?id=15314812

  min() and max()
Haven't been enabled in iOS 11 yet, as the article states.

Re: Designing Websites for iPhone X

#67
This is mindboggling to me why Apple designers thought it would be a good idea to have that black inset in the new iPhone, any ideas what's the reason behind that product decision?

Re: Designing Websites for iPhone X

#68
post #56
post #8

Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing. Default behavior is for you to do nothing to your code and Safari on the X will automatically pad around the inset and rounded corners. This is just if you _want_ t…

OK, I'll say it: this would not have happened under Steve.

A lot of things wouldn't have. Top of my list:

a) keeping the macbook air non-retina (for like five years after PC laptops were retina, even after the incremental cost for the feature was very, very close to zero due to industry-wide cost reductions in display/chipset tech)

b) shipping the new macbook pro with the touch bar

c) shipping the new macbook pro with that keyboard that just breaks down when used outside of a cleanroom

d) the whole luxuary/jewelry transition of the company

Re: Designing Websites for iPhone X

#69
post #14

Hahaha lmao. I can't believe this is a real thing, that we have to design for one specific device now. Really?

No, the article even says: Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing.

That is what they said, but look at the screenshot of the unmodified website. It looks terrible. They should have filled it with black.

Re: Designing Websites for iPhone X

#70
post #8

Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing. Default behavior is for you to do nothing to your code and Safari on the X will automatically pad around the inset and rounded corners. This is just if you _want_ t…

Appreciate the quick summary. Was thinking I was going to have start editing a bunch of media queries.
Post reply on HN