screen size
The summary of the development dimensions of the iPhone series that we are familiar with is as follows:
△Development size of each iPhone modelConvert to the well-known pixel size:
△Multi-dimensional dimensions of each modelThe magnification map 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 X has undergone major changes in terms of screen size, resolution, and even shape. Let’s take iPhone 8 as a reference to see how we should consider the adaptation of iPhone X.
Let’s take a look at the changes in iPhone X size:
2. iPhoneX adaptation---safe area (safe area)Apple’s opinions on the design layout of iPhone X are as follows:
The core content should be in the Safe area to ensure that it is not obscured by the device's rounded corners (corners), sensor housing (sensor housing, full bangs) and the Home Indicator at the bottom. In other words, 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, the meta tag of viewport-fit is used as the adaptation scheme in iOS 11; 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, the page content fills the screen |
viewport-fit meta tag setting (when covering)
<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>
3.2 Introduction to css constant() function and safe-area-inset-top &safe-area-inset-left &safe-area-inset-right &safe-area-inset-bottom
As shown 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-area-inset-bottom, etc. Parameters have no effect.
3.2 When we set viewport-fit:cover: the settings are as follows
body { padding-top: constant(safe-area-inset-top); //The height of the navigation bar + status bar is 88px padding-left: constant(safe-area-inset-left); //If the screen is not vertical Is 0 padding-right: constant(safe-area-inset-right); //If the screen is not vertical, it is 0 padding-bottom: constant(safe-area-inset-bottom);//The height of the bottom arc is 34px } 4. iPhoneX adaptation---height statisticsviewport-fit:cover + navigation bar
5. iPhoneX adaptation---media queryNote that 690px (safe area height) is used here, not 812px;
@media only screen and (width: 375px) and (height: 690px){ body { background: blue; }} 6.iphoneX viewport-fit Problem summary1. When the iphoneX page uses gradient colors; if viewport-fit:cover;
1.1 The difference between a single color and a gradient color is set when the background color is set. 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. Use the above padding-top:88px;
The body is fixed to:
<body><div class=content>this is subElement</div></body>
1. When monochrome:
* { 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);*/ }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);*/ }How to solve the problem of using gradient color to still fill 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>2. The page element uses fixed positioning adaptation: {position:fixed;}
2.1 When the child element page is fixed at the bottom; when using viewport-fit:contain; you can see that when bottom:0 is displayed, it will only be displayed in the safe area;
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1> <!--<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 { background: gray; /*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);*/ } .top { width: 100%; height: 44px; background: purple; } .bottom { position: fixed; bottom: 0; left: 0; right: 0; height: 44px; color: black; background: green; } </style></ head><body> <div class=top>this is top</div> <div class=bottom>this is bottom</div></body></html>2.1 When the child element page is fixed at the bottom; when using viewport-fit:cover; you can see that bottom:0 will only be displayed in the safe area;
Add html,body {width:100%;heigth:100%}
Figure 1:
* { padding: 0; margin: 0; } html,body { height: 100%; } body { background: gray; 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); } .top { width: 100%; height: 44px; background: purple; } .bottom { position: fixed; bottom: 0; left: 0; right: 0; height: 44px; color: black; background: green; }Figure 2:
* { padding: 0; margin: 0; } html,body { height: 100%; } body { background: gray; 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);*/ } .top { width: 100%; height: 44px; background: purple; } .bottom { position: fixed; bottom: 0; left: 0; right: 0; height: 44px; color: black; background: green; }2.3 Solution to the alertView pop-up mask layer
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <!--<meta name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=1.0 , maximum-scale=1.0, user-scalable=no>--> <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> <meta http-equiv=pragma content=no-cache > <meta http-equiv=cache-control content=no-cache> <meta http-equiv=expires content=0> <title>alertView</title> <script data-res=eebbk> document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px'; </script> <style> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; } body { font-size: 0.32rem; 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 { text-align: center; } .testBut { margin: 50px auto; width: 100px; height: 44px; border: 1px solid darkgray; outline:none; user-select: none; background-color: yellow; } </style> <link href=alertView.css rel=stylesheet type=text/css></head><body> <section class=content> <button class=testBut onclick=showLoading()>Pop-up loading</button> </section> <script type=text/javascript src=alertView.js></script> <script> function showLoading() { UIAlertView.show({ type:input, title: Warm reminder, //Title content: VIP membership is about to expire, //Get new isKnow: false }); var xx = new UIAlertView(); console.log(xx); } </script></body></html> SummarizeThe above is what the editor introduces to you about the adaptation of HTML5 pages to iPhoneX. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!