Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iPhone X support #4835

Merged
merged 1 commit into from
Apr 5, 2018
+2 −1
Merged

iPhone X support #4835

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
iPhone X support 
Adds support for the iPhone X safe area insets.

Link: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Here’s a preview of what it looks like: https://twitter.com/codeOfRobin/status/981473964223430658

Signed-off-by: Robin Malhotra <[email protected]>
@codeOfRobin
codeOfRobin committed Apr 4, 2018

Partially verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
We cannot verify signatures from co-authors, and some of the co-authors attributed to this commit require their commits to be signed.
commit fcc6394d03b58f6a32488cd3a18348afd9a0f813
1 change: 1 addition & 0 deletions www/src/components/navigation-mobile.js
View file
Original file line number Diff line number Diff line change
@@ -45,6 +45,7 @@ const MobileNavigation = () => (
borderTop: `1px solid ${colors.ui.light}`,
background: colors.ui.whisper,
fontFamily: typography.options.headerFontFamily.join(`,`),
paddingBottom: `env(safe-area-inset-bottom)`,
[presets.Tablet]: {
display: `none`,
},
2 changes: 1 addition & 1 deletion www/src/html.js
View file
Original file line number Diff line number Diff line change
@@ -49,7 +49,7 @@ export default class HTML extends React.Component {
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>
<link
rel="apple-touch-icon"