Taking notes on various iPhone x adaptations (super comprehensive)



Unlike previous iPhones, this time, the iPhone x uses the popular full screen design. The resolution and scale of the screen are both adopted by apple for the first time, and there is also a “chic Bang”. This requires the existing app to re adapt the iPhone X.

So the arrival of iPhone x, amazing is the fruit powder, bitter is the app ape. Today, I upgraded to xcode9.0 and ran the project. The so-called full screen iPhone x, but page does not seem to have a full screen. Therefore, according to the previous adaptation experience, this problem has been initially solved. The record is as follows for future needs.

Before app page adaptation

Before adaptation


Problem: app is not displayed in full screen

terms of settlement

Add an and to launchimageiPhone XRelated startup image

*Image size: 1125 * 2436

* Contents.json The code is as follows

 "extent" : "full-screen",
 "idiom" : "iphone",
 "subtype" : "2436h",
 "filename" : "1125_2436.png",
 "minimum-system-version" : "11.0",
 "orientation" : "portrait",
 "scale" : "3x"

After adaptation


Page layout details

Safe Area


IPhone x cancels the home key and realizes high screen proportion, so the default view area is full screen

There are rounded corners around the screen, bangs at the top and gesture areas at the bottom

Top navigation bar


*Attention: navigation bar height is 44 + 44

Bottom gesture area


The safe area is shown in the following figure (red area)


Safe area size vertical screen

▿ UIEdgeInsets
 - top : 44.0
 - left : 0.0
 - bottom : 34.0
 - right : 0.0

Horizontal screen

 - top : 0.0
 - left : 44.0
 - bottom : 21.0
 - right : 44.0

Points for attention in automatic layout

  • Before ios11, when we layout, the top and bottom of views generally referred to the top layout guide and bottom layout guide
  • After ios11, those two references were obsolete and replaced by safe area.
  • Minimum support required for safe areaiOS9.0




For automatic layout of top or bottom attributes related to the parent view, safe area should be referenced. (previously, the default is superview. Of course, if the product allows, that’s another thing.)

An example of selecting a safe area layout is as follows:


An example of not selecting a safe area layout is as follows:


Some people on the Internet have seen black iPhone x, saying that they can’t play games such as king’s glory with it. The reason is that they may not see how much money they have or that the push tower button and the signal button are gone. It’s estimated that they are worried about this! Before the iPhone x is sold, game manufacturers will definitely do the adaptation. The proportion of high screen will only improve the game experience and will not cause such serious visual problems.

Before and after adaptation, the effect picture is as follows:


Xcode9 adaptation


//Original address: https://github.com/marcuswestin/WebViewJavascriptBridge/issues/278
- (void)webView:(WKWebView *)webView
didFailNavigation:(WKNavigation *)navigation
 withError:(NSError *)error {
 // ……
 //There is a bug in wkwebview javascriptbridge. M after Xcode is upgraded to 9
 //You need to add return after "decisionhandler (wknavigationactionpolicycancel);", otherwise it will crash.
 //If you don't upgrade Xcode, no problem.

Some pages fit iPhone x

Pages with buttons at the bottom

Before adaptation


The bottom constraint is as follows:


After adaptation


The bottom constraint is as follows:


Viewsafereainsetsdidchange of controller life cycle

  • viewDidLoad
  • viewWillAppear
  • viewSafeAreaInsetsDidChange(NEW
  • viewWillLayoutSubviews
  • viewDidAppear

You can set the safe area after viewsafeareainsetsdidchange

if #available(iOS 11.0, *) {
 self.additionalSafeAreaInsets = UIEdgeInsetsMake(10, 0, 0, 34)


This is all the content of this article. I hope that the content of this article will have a certain reference learning value for your study or work. If you have any questions, you can leave a message for communication. Thank you for your support for developeppaer.