iPhone X / 8 / 8 Plus CSS media queries

iPhone X @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { } iPhone 8 @media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) { } iPhone 8 Plus @media only screen and (device-width : 414px) and (device-height : 736px) and (-webkit-device-pixel-ratio : … Read more

iOS 11 iPhone X simulator UITabBar icons and titles being rendered on top covering eachother

I was able to get around the problem by simply calling invalidateIntrinsicContentSize on the UITabBar in viewDidLayoutSubviews. -(void)viewDidLayoutSubviews { [super viewDidLayoutSubviews]; [self.tabBar invalidateIntrinsicContentSize]; } Note: The bottom of the tab bar will need to be contained to the bottom of the main view, rather than the safe area, and the tab bar should have no … Read more

Cordova app not displaying correctly on iPhone X (Simulator)

I found the solution to the white bars here: Set viewport-fit=cover on the viewport <meta> tag, i.e.: <meta name=”viewport” content=”initial-scale=1, width=device-width, height=device-height, viewport-fit=cover”> The white bars in UIWebView then disappear: The solution to remove the black areas (provided by @dpogue in a comment below) is to use LaunchStoryboard images with cordova-plugin-splashscreen to replace the legacy … Read more

Seeing black bars at the top and bottom of the iPhone X Simulator

When using launch images (instead of the much easier Launch screen file), you need to provide the properly sized launch image for each device size you wish to support. Once you add the additional launch image, your app should take advantage of the new screen size. The new iPhone X requires a launch image sized … Read more