The notch screen of iphone When fixed at the top, if you slide the page up or down, there will be a large gap. It is okay if the background is all white, otherwise it will look like it is broken, which is very ugly.
iphone screen size
The difference in size between iPhoneX and other models
The reason for the above problem is that iPhoneX has a safe area. The safe area refers to a visual window range. The content in the safe area is not affected by corners, sensor housing, and home indicator , the blue area in the figure below:
In other words, if we want to adapt well, we must ensure that the visible and operable area of the page is within the safe area.
For specific dimensions, please see Human Interface Guidelines – iPhoneX
How to adapt?The first step is to set the layout of the web page in the visual window
<meta name=viewport content=width=device-width, viewport-fit=cover>
A new feature of iOS11. In order to adapt to iPhoneX, Apple has extended the existing viewport meta tag to set the layout of the web page in the visual window. Three values can be set:
Note: The web page that does not add extensions by default is viewport-fit=contain. If it needs to be adapted to iPhoneX, viewport-fit=cover must be set. This is a key step for adaptation.For details, see: The viewport-fit descriptor
In the second step, the main content of the page is limited to the safe area.
.post { padding: 12px; padding-left: env(safe-area-inset-left); padding-left: const(safe-area-inset-left); padding-right: env(safe-area-inset-right ); padding-right: const(safe-area-inset-right);} constant functionA new feature of iOS11, a CSS function of Webkit, is used to set the distance between the safe area and the boundary. There are four predefined variables:
Note: Some browsers no longer support the constant function and use the env function instead.
By default, if the client handles the security zone, the effect is as follows:
After using the full screen viewport-fit=cover attribute:
Safety area map:
Rendering after limiting the safe area:
The padding is set to 12 pixels above. If the direction is rotated:
The third step is to use the min() and max() methods
@supports(padding: max(0px)) { .post { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset- right)); }} Fixed element fixed problem
If the page title is implemented on the front end and is fixed at the top, it will be blocked. At this time, you can set the top value to a safe distance value, for example:
.header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}Reference article: Designing Websites for iPhone X
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.