"Don't mask or call special attention to key display features. Don't attempt to hide the device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don't use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either."
Same guidelines also specify the safe area to put actual content, which excludes that area. In addition they suggest not hiding the status bar, which generally would push your content below it anyway.
> Inset essential content to prevent clipping. In general, content should be centered and symmetrically inset so it looks great in any orientation and isn't clipped by corners or the device's sensor housing, or obscured by the indicator for accessing the Home screen
...and...
> If your app currently hides the status bar, reconsider that decision on iPhone X. The display height on iPhone provides more vertical space for content than the displays of 4.7" iPhones, and the status bar occupies an area of the screen your app probably won't fully utilize.
[emphases mine]
My take is they don't want you putting a black background up there to mask it (unless all of your background is black, presumably) but you don't have to lay out around it either. For videos and photos in particular, since black is the normal background for outside the image I doubt there'll be an issue using it at the ends.
My take on this is that they're aiming to have people experiment with the two little areas rather than have everyone immediately "letterbox" it away. (Although to be honest it's a little baffling since I think it detracts from the phone, especially when playing games or watching videos).
Probably, yeah. I think the proof will be in how they deal with HUD-less full screen games like Infinity Blade--will they expect an animated background to draw around the notch, will they be OK with a 16:9 crop to normalize between phones, or what?
That's one interpretation. Cropping video content doesn't necessarily fall into that, yet I can see how some other designs would and why they would want developers to avoid that. Besides, there's also:
> Be mindful of aspect ratio differences when reusing existing artwork. iPhone X has a different aspect ratio than 4.7" iPhones. As a result, full-screen 4.7" iPhone artwork appears cropped or letterboxed when displayed full-screen on iPhone X. Likewise, full-screen iPhone X artwork appears cropped or pillarboxed when displayed full-screen on a 4.7" iPhone. Make sure that important visual content remains in view on both display sizes.
Emphasis mine.
EDIT: Also here [1]:
> Adhere to the safe area and layout margins defined by UIKit. These layout guides ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar. Standard system-provided views automatically adopt a safe area layout guide.
The diagram shown suggests a "safe area" even inset a little from the notch.
I think they got their aspect ratio statement backwards. Surely 16:9 (iPhone 7) content appears pillarboxed on the 19.5:9 screen (iPhone X) and iPhone X content appears letterboxed on the iPhone 7?
"Don't mask or call special attention to key display features. Don't attempt to hide the device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don't use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either."
https://developer.apple.com/ios/human-interface-guidelines/o...