#Iphone x just cause 4 images full#
This will result in a page that takes full advantage of the increased screen real estate on iPhone X while adjusting dynamically to avoid the corners, sensor housing, and indicator for accessing the Home screen. The next step towards making our page usable again after adopting viewport-fit=cover is to selectively apply padding to elements that contain important content, in order to ensure that they are not obscured by the shape of the screen. Use `viewport-fit=cover` to fill the whole screen. However, it is immediately clear why it is important to respect the system’s safe area insets: some of the page’s content is obscured by the device’s sensor housing, and the bottom navigation bar is very hard to use. After doing so, our viewport meta tag now looks like this: Īfter reloading, the navigation bar looks much better, running from edge to edge.
#Iphone x just cause 4 images full size#
In order to disable that behavior and cause the page to lay out to the full size of the screen, you can set viewport-fit to cover. The default value of viewport-fit is auto, which results in the automatic insetting behavior seen above. The first new feature is an extension to the existing viewport meta tag called viewport-fit, which provides control over the insetting behavior. While reading this post you can tap on any of the images to visit a corresponding live demo page and take a peek at the source code. Your website can make use of a few similar new pieces of WebKit API introduced in iOS 11 to take full advantage of the edge-to-edge nature of the display. The iPhone X Human Interface Guidelines detail a few of the general design principles to keep in mind, and the UIKit documentation discusses specific mechanisms native apps can adopt to ensure that they look good. Other pages - especially those designed with full-width horizontal navigation bars, like the page below - can optionally go a little further to take full advantage of the features of the new display. If your page has only text and images above a solid background color, the default insets will look great. The inset area is filled with the page’s background-color (as specified on the or elements) to blend in with the rest of the page. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing. Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. The section below about safe area insets was updated on to reflect changes in the iOS 11.2 beta.
0 kommentar(er)
