Search code examples
swiftxcodecameraiphone-x

iPhone X camera not filling screen

I have implemented a QR scanner in my app and the layout works great on all devices but the iPhone X. On the iPhone X, there is a large white bar between the navigation bar and the camera view (there is no white bar on any other device). I am not sure what is causing this. How do I make the camera view take up the full screen?

Here is how I have implemented how large the camera view should be:

video.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
view.layer.addSublayer(video)

Also here is a screenshot of the white bar (the screen is black because the camera is flat on a table):Screenshot

Solution

  • The main reason you get a white bar is the aspect ratio:

    • Camera: most likely 16 : 9 (e.g. for 1920 by 1080)
    • iPhone X: screen resolution of 812 by 375 (logical) or 1125 x 2436 (physical) translates to about 16 : 7.4

    So when you create a view that matches exactly the screen dimension and add the camera view to it, there will be a bar at the top and at the bottom that is not covered by the camera view.

    The bottom bar is not visible because your view seems to start below the navigation bar, i.e. it extends below the screen's bottom.

    Other iPhones are not affected by this as they have a screen size with 16 : 9 proportions, e.g. 1334 x 750. If you have an iPad version, it should also be affected by the problem and exhibit bars to the left and right.

    To fix it:

    • Position your view below the navigation bar so it covers most of the bar at the top
    • Change the background color to achieve a more suitable color
    • Expand the width of the view to achieve a 16 : 9 aspect ratio and center the view