The default is your website gets padded so the unique design "features" don't interfere with your current design.
That's fine by me.
Designing Websites for iPhone X
11–20 of 135 posts
Re: Designing Websites for iPhone X
#12Hahaha lmao. I can't believe this is a real thing, that we have to design for one specific device now. Really?
It's less infuriating if you read it in Jony Ive's voice.
Re: Designing Websites for iPhone X
#13What's the slim vertical bar by the left side of the phone (if held in portrait mode)?
Re: Designing Websites for iPhone X
#14Hahaha 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.
Re: Designing Websites for iPhone X
#15So, the standard for constant() will have a different name/syntax but they put it without any prefix? Why?
Re: Designing Websites for iPhone X
#16Re: Designing Websites for iPhone X
#17Keep in mind that this is mostly a problem in landscape mode and roughly 90% of usage is in portrait mode.
Re: Designing Websites for iPhone X
#18I'll just leave this here: "I think I’ve fixed the notch issue in landscape #iphoneX" https://twitter.com/vojtastavik/status/907911237983449088
And if you rotate it 180 degrees, you get this: https://twitter.com/ZevEisenberg/status/908148886363103232
Re: Designing Websites for iPhone X
#19I was ready to be annoyed by this, and it is a ridiculous design, but the article is a pretty good discussion of CSS's round display extensions. Those have been sort of sitting around gathering dust as far as I can tell, but the idea seems pretty cool and potentially useful. I like that they're proposing a safe area constant, which makes a lot of sense. This is a really great way to see it all actually working and figure out what still needs to happen.
With that said, they lose the plot a bit when the iPhone X's safe area adds unnecessary padding outside of the notch, and then double down on that mistake when they talk about their brand new `min()` and `max()` functions. When you start combining math functions in CSS, you need to back up and ask what you did wrong, because you definitely did something wrong.
What you should do is add some padding for the safe area, which might be 0, and then add some more padding (of your choosing) beyond that. Same way any other screen works. But it's Apple, so it will probably end with everyone forced to make the same stupid mistake and then we'll need a new standard to get rid of it all.
Anyway, grumbles aside, I think Apple deserves kudos here for pushing forward some existing standards in a mostly constructive way.
Re: Designing Websites for iPhone X
#20This is horrifying. We shouldn't be encouraging device makers to create random bits of new css syntax to cover their weird viewports.