Tag Archives: iphonex

React Native and iPhone X: <SafeAreaView />

One of the elements that shipped with React 0.50 is <SafeAreaView />. It’s a component which you can use to prevent your content from creeping below The Notch and Home Indicator on iPhone X. import { // … SafeAreaView } from 'react-native'; class Main extends React.Component { render() { return ( <SafeAreaView style={styles.safeArea}> <App /> …

Continue reading “React Native and iPhone X: <SafeAreaView />“

Read Post →

Rendering Sites Fullscreen in Safari on iPhone X / Introducing “User Agent Variables” (CSS Environment Variables)

What the …? By default, the new iPhone X in landscape mode will contain sites in the so called “safe area”, resulting in white bars being rendered on either side of the site (src). The color, white by default, can be tweaked by altering the background-color on the <body> element. Do note that it’s only …

Continue reading “Rendering Sites Fullscreen in Safari on iPhone X / Introducing “User Agent Variables” (CSS Environment Variables)”

Read Post →