Show Status Bar Only for iPhone X

Show Status Bar only for iPhone X

Method 1:

You have to add this value to plist: "View controller-based status bar appearance" and set it to "NO".
Sample Image

After that add this in AppDelegate

   var window: UIWindow?
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)
        if #available(iOS 11.0, *) {
            if (window?.safeAreaInsets.top)! > CGFloat(0.0) || window?.safeAreaInsets != .zero {
                print("iPhone X")
                application.isStatusBarHidden = false
                //or UIApplication.shared.isStatusBarHidden = true
            }
            else {
                print("Not iPhone X")
                application.isStatusBarHidden = true
            }
        }
        return true
    }

Method 2:
"View controller-based status bar appearance" and set it to "YES". Which is by default.

As in iOS11+ setStatusBarHidden & isStatusBarHidden are deprecated,
prefersStatusBarHidden is available from iOS7+, We can make status bar visibility settings over ViewController as-

struct StatusBarInfo {
    static var isToHiddenStatus = false
  }
    var window: UIWindow?
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

        if #available(iOS 11.0, *) {
            if (window?.safeAreaInsets.top)! > CGFloat(0.0) || window?.safeAreaInsets != .zero {
                print("iPhone X")
                StatusBarInfo.isToHiddenStatus = false
            }
            else {
                StatusBarInfo.isToHiddenStatus = true
                print("Not iPhone X")
            }
        }
        return true
    }

In ViewController.Swift

override var prefersStatusBarHidden: Bool {
        return StatusBarInfo.isToHiddenStatus
    }

How to get a black statusbar on iPhone X on iOS 11

Safe Area Layout is a solution to your problem.

I tried following the solution in my existing projects and it works fine.

Set black background color (or what ever you want) to main view of your view controller.
Now add child view (with white background) and set its constraints relative to Safe Area Layout (or follow Top and bottom layout guide if Xcode version is below 9).
Consider this child view (with white background) as a main view and process further design with it.

Here is sample snapshot with result, By enabling or disabling Safe Area layout, I tested and implemented.

FYI: In these snapshots, main view has red background and child view has blue background color.

Safe Area Layout:
Sample Image

AutoLayout

Sample Image

iPhone X status bar black web app

It is possible, but requires a few lines more. Here is how to do it. Strictly speaking I don't think you need width=device-width and initial-scale=1.0, I added it since you use it. The launch.png is your launch image that will show if your page takes time to load, and it should be a 1125 x 2436 PNG image and also be placed on your server, of course. It is required to make it work. As is the black-translucent status bar style and the viewport-fit=cover.

Also note that if you already have created a shortcut to your page you must remove it and create it again after you have updated your page with this content.

<html><head>
  <meta charset="utf-8">
  <link rel="apple-touch-startup-image" href="./launch.png">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name='viewport' content='viewport-fit=cover, width=device-width, initial-scale=1.0'>
  <title>Test</title>
</head>
<body>
    content
</body>
</html>

The above will stretch your viewport all the way to the top for iPhone X (and other models), setting the top bar content (clock, battery status, signal strength etc) to white on transparent. If you have a white or very light colored background this probably doesn't look very good. Unfortunately there is no way to have have dark content on your own background. However, there are a couple of options that might be good enough.

Setting the apple-mobile-web-app-status-bar-style to default gives you a black top bar content on a solid white background plate. This will look fine if you can accept your content to have a white top bar background and scroll under it.

<meta name="apple-mobile-web-app-status-bar-style" content="default">

Another option is to set apple-mobile-web-app-status-bar-style to black. This is more of a convenience, which creates a solid black background with white top bar content, effectively resulting in a reverse of using default.

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Here are samples of how the different content parameters will look. Not iPhone X but the color schemes are same.

Read here if you need to account for the different top bar heights on different iOS devices.

Future-proof way to detect iPhones with a notch (like the iPhone X)

I was not able to find any "future-proof" way to do this, so I am finally relying on the safe area insets.

One important note, though, is that this should not be done by checking the top inset alone, as the top inset may vary, for example, when the in-call status bar is being shown. It is better to check either the bottom inset or both bottom and top.

UIWebView show overlapping status bar in ios-11, iPhone-X, Xcode-9

The height of the StatusBar in the iPhoneX is higher than in the other devices, it is necessary to calculate this height and use this value for the WebView coordinates.

Add a view to place the OK button:

@IBOutlet weak var myTopBar: UIView!

Calculate height of statusBar:

//Get height status bar let statusBarHeight = UIApplication.shared.statusBarFrame.height // to see correctly on all device models the new height will be: let heightTotal = self.myTopBar.frame.height + statusBarHeight

3: In the webView, use this height:

webView = WKWebView(frame: CGRect( x: 0, y: heightTotal, width: self.view.frame.width, height: self.view.frame.height - heightTotal), configuration: WKWebViewConfiguration() )

Show Status Bar Only for iPhone X