Analysis of iPhone x adaptation issues in ios development tutorial, iosiphonex
The iphone once again revolutionizes the industry, and every time it is so capricious, every time a problem occurs, consumers have to pay. The most important thing to pay for this time is the designer. The iPhone x hardware is out of the sea, and the software has a bottom handle. To tell the truth, the demonstration is cool, and it is a bit hard to adapt.
The following describes the centralized adaptation solution. In fact, the most basic idea is to avoid the upper and lower regions and only display the content in the security zone.
Simplest solution
Use a fixed position to move up and down. Use a black bar with a 44px height to fix it. Use 34px to fix it below. The content display body is also configured with padding.
<meta charset="UTF-8" /><title></title><meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes" name="viewport" /><style type="text/css">body{padding-top:44px;padding-bottom: 34px;} .top{position: fixed;width:100%;height:44px;background-color: #000;top:0;left: 0;} .bottom{position: fixed;width:100%;height:34px;bottom:0;left: 0;}</style>
Sfsd
Evolutionary Solutions
The above method is obvious. It is suitable for initial development. How can we quickly adapt existing projects that have already been developed? According to the above idea, I wrote a general css, you only need to introduce css and add this class to the body. Css performs filtering based on the resolution, so it does not affect the adaptation of other existing devices.
Iphonex.css
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .iphonex{padding-top:44px;padding-bottom: 34px;} .iphonex:before{content:'';display:block;position: fixed;width:100%;height:44px;background-color: #000;top:0;left: 0;z-index:9999;} .iphonex:after{content:'';display:block;position: fixed;width:100%;height:34px;bottom:0;left: 0;z-index:9999;} }
Html file
<Meta charset = "UTF-8"/> <title> </title> <meta content = "width = device-width, maximum-scale = 1.0, initial-scale = 1.0, minimum-scale = 1.0, user-scalable = yes "name =" viewport "/> <link href =" iphonex.css "rel =" stylesheet "/your own page content
Note: If you already have a location on the page, you may need to adjust the location of the original element.
Other ideas
In general, the idea is to let the upper and lower spaces out, and there are still many ways to implement it, such as using absolute positioning, or js.