Note that unlike legacy splash images, these image filenames must match exactly! (Also note that Medium’s unfortunate formatting may cause the dimension comments to not copy/paste correctly). Remove the old splash screen image files and update your config.xml file to use the following. For more information, see Kerri’s excellent article. Note that the official Splashscreen plugin is not required for these changes, despite the most documentation regarding these changes appearing there. These are a replacement for the legacy launch splash screen images, which Apple are moving away from. In order to fill the entirety of the iPhone X’s gorgeous display, we need to remove the black bars that appear at the top and bottom of the screen by switching to iOS Launch Storyboards. Switch to the New Storyboard Splash Screens With that change applied, the white bars are removed and the app displays much like other iPhone models. Here’s the before and after transformation: I’ll be using my iOS app Fitwatchr as an example. You can also trick people into clicking a link, so be careful. For example it can be useful to display information about a link, when the user moves his mouse over it or you can display a small amount of information about the page the user is on in the status bar. There are four steps to updating your PhoneGap apps for the iPhone X. JavaScript gives you the ability to modify the status bar. Apple has a history of making bold design choices and sticking with them, so by updating your apps now, you’ll be better positioned for future iterations.

I know what you’re thinking: “This is just a one-off device! Why go through the effort to support it?” While we don’t know for sure, it’s a safe bet that this will be the standard iPhone design going forward.

However, with the iPhone X, we must make an exception.

Included in the many changes is a display that covers the entire surface area of the device, no home button, and “the notch”, a rounded black bar that houses the front-facing camera.Īs PhoneGap developers, we love the fact that our apps run without any platform-specific code on iOS, Android, and more. On the heels of the original iPhone’s 10th anniversary this Fall, Apple released its latest flagship device, the iPhone X.

Status bar ios html example