Analysis of iPhone x adaptation issues in ios development tutorial, iosiphonex

Source: Internet
Author: User

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>


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.

@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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.