Issues related to the adaptation of HTML5 pages to iPhoneX-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Issues related to the adaptation of HTML5 pages to iPhoneX

php中世界最好的语言

Jan 29, 2018 am 09:31 AM

html5 iphonex adaptation

This time I will bring you the issues related to the adaptation of HTML5 pages to iPhoneX. What are the precautions regarding the adaptation of HTML5 pages to iPhoneX. Here are practical cases, let’s take a look.

1. Introduction to iPhoneX

Screen size

The magnification chart is actually the magnification relationship between the pixel size and the development size, but this is only an external manifestation. The core influencing factor of magnification is PPI (DPI). Understanding the relationship between screen density and various sizes will help us deeply understand the concept of magnification: "Learn the basics! DPI Guide Tailored for Designers"

In this upgrade, the screen size and resolution of iPhone8 have inherited the fine traditions of iPhone6 and later;

However, iPhone The size, resolution, and even shape have all undergone major changes. Let’s take the iPhone 8 as a reference to see how we should consider the adaptation of the iPhone X.

2. iPhoneX adaptation---safe area(safe area)

Apple’s design layoutopinions for iPhone The content should be in the Safe area to ensure that it is not blocked by the device's rounded corners (corners), sensor housing (sensor housing, notch) and the Home Indicator at the bottom. That is to say, the content we design to display should be within the safe area as much as possible;

3. Adaptation of iPhoneX---Adaptation scheme viewport-fit 3.1 Adaptation of PhoneX is adopted in iOS 11 The meta tag of viewport-fit is used as an adaptation solution; the default value of viewport-fit is auto.

The value of viewport-fit is as follows:

auto Default: viewprot-fit:contain; page content is displayed in the safe area

cover viewport-fit:cover, page content Fill the screen

viewport-fit meta tag setting (when cover)

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

Copy after login

3.2 css constant() function and safe-area-inset-top &safe-area-inset-left &safe-area- Introduction to inset-right &safe-area-inset-bottom

As shown in the picture above, WebKit in iOS 11 includes a new CSS function constant(), and a set of four predefined constants: safe -area-inset-left, safe-area-inset-right, safe-area-inset-top and safe-area-inset-bottom. When combined together, allows styles to reference the size of each aspect's safe area.

3.1 When we set viewport-fit:contain, which is the default time; set safe-area-inset-left, safe-area-inset-right, safe-area-inset-top and safe- Parameters such as area-inset-bottom have no effect.

3.2 When we set viewport-fit:cover: The settings are as follows

body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px           
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0               
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0               
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px      
}

Copy after login

4. iPhoneX adaptation---height statistics

viewport-fit:cover + navigation Column

5. iPhoneX adaptation---

Media query

Note that 690px (safe area height) is used here, not 812px;

@media only screen and (width: 375px) and (height: 690px){
    body {
        background: blue;
    }
}

Copy after login

6.iphoneX viewport-fit

Summary of the problem

1. When the iphoneX page uses gradient color; if viewport-fit:cover;

1.1 is set The difference between a single color and a gradient background color. If it is a single color, it will fill the entire screen. If a gradient color is set, it will only be rendered at the height of the child element; and the height of the page is only 690px, and padding-top is used above. :88px;

body is fixed to:

<body><div class="content">this is subElement</div></body>

Copy after login

1. Single color:

* {
           padding: 0;
           margin: 0;       
       }       
       body {
           background:green;
           padding-top: constant(safe-area-inset-top); //88px           
           /*padding-left: constant(safe-area-inset-left);*/           
           /*padding-right: constant(safe-area-inset-right);*/           
           /*padding-bottom: constant(safe-area-inset-bottom);*/       
       }

Copy after login

2. Gradient color

* {
           padding: 0;
           margin: 0;
       }
       body {
           background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));
           padding-top: constant(safe-area-inset-top); //88px
           /*padding-left: constant(safe-area-inset-left);*/
           /*padding-right: constant(safe-area-inset-right);*/
           /*padding-bottom: constant(safe-area-inset-bottom);*/
       }

Copy after login

Solve the problem of using gradient color and still filling it Method for the entire screen; CSS settings are as follows

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
   <title>Designing Websites for iPhone X: Respecting the safe areas</title>
   <style>        * {
       padding: 0;
       margin: 0;
   }
   html, body {
       height: 100%;
   }
   body {
       padding-top: constant(safe-area-inset-top);
       padding-left: constant(safe-area-inset-left);
       padding-right: constant(safe-area-inset-right);
       padding-bottom: constant(safe-area-inset-bottom);
   }
   .content {
       background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));
       width: 100%;
       height: 724px;
   }    </style>
</head>
<body>
<div class="content">this is subElement</div>
</body>
</html>

Copy after login

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!