Article Directory
foreword
First, this article will explain in detail how to use viewport-fit and the env function of css. If you understand and are familiar with these things, please skip directly to the third step [Solve the two situations where ios content is blocked by Safari] Finally, it will explain in detail how to set the div on the first layer of the page body to 100vh and 100% height to solve the compatibility problem caused by ios content being blocked by the address bar, menu bar or toolbar in the Safari browser
.
One, viewport-fit
1. Function
viewport-fit is a property specially created to adapt to iPhoneX, and it is used to limit how web pages are displayed in the safe area.
2. Value
| The value of viewport-fit | Effect |
|---|---|
| containdefault | viewprot-fit:contain; the content of the page is displayed in the safe area |
| cover | viewport-fit:cover, the page content fills the screen |
默认情况下或者设置为 auto和 contain效果相同。H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。
3. use
<meta name="viewport" content="viewport-fit=cover">
Note: you cannot write more than one meta name, the later ones will overwrite the previous ones, that is, if you want to add viewport-fit, you should add it after the original meta tag
/* 创建一个html页面默认的meta */
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
/* 需要添加上viewport-fit后应该是 */
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewprot-fit:cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
That is, the syntax used is
<meta name="viewport" content="... viewport-fit=cover">
2. Use the env() and constant() functions of css to set the distance between the safe area and the border
1. The security area of the iPhone (as shown below)
2. Origin, action
iOS11 adds two new CSS functions env and constant, which are used to set the distance between the safe area and the border.
3. use
(1) Premise: H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。
(2) Predefined variables inside the function
- safe-area-inset-left: the distance between the safe area and the left border
- safe-area-inset-right: the distance between the safe area and the right border
- safe-area-inset-top: the distance between the safe area and the top border
- safe-area-inset-bottom: the distance between the safe area and the bottom border
(3) Used in the page (generally use the head and the bottom, the distance between the left and right sides is generally given in the design draft with an inner/outer margin to center the page)
important point
constant 和 env 同时使用的情况下，constant函数要在env函数的上面
.content{
padding-bottom: constant(safe-area-inset-top: 20px); /* 兼容 iOS<11.2 */
padding-bottom: env(safe-area-inset--top: 20px); /* 兼容iOS>= 11.2 */
padding-bottom: constant(safe-area-inset-bottom: 20px); /* 兼容 iOS<11.2 */
padding-bottom: env(safe-area-inset-bottom: 20px); /* 兼容iOS>= 11.2 */
}
(4) Attributes in the env() function are case-sensitive
padding-left: env(SAFE-AREA-INSET-TOP, 50px);
Note: the attributes in the env() function are case-sensitive, and SAFE-AREA-INSET-LEFT is an unrecognized attribute, so the padding-top value in the above CSS code must use the bottom 50px. So in actual development, you can also deliberately write in uppercase as a cover style.
4. Grammar
That is to say, the value unit of the env function can be px/em/vh/rem, if not filled, it will be 0
/* 使用没有回退值的四个安全区域插入值 */
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
/* 它们与回退值一起使用 */
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);
5. Compatibility issues
These two functions are css functions in webkit, and variable functions can be used directly, which are only supported under the webkit kernel
| env function | constant function |
|---|---|
| Must be supported on ios >= 11.2 | Must support ios < 11.2 |
3. Solve two situations where ios content is blocked by Safari
1. The height of the top div: 100vh
1vh= 视口大小高度的 1%。
As shown in the figure below, the proportion of 100vh opening the same project in WeChat and Safari browser
Since wh represents the height of the viewport size, and in the Safari browser of ios, the address bar and menu bar/toolbar are also part of the viewport, so when the mobile phone with ios14 and above opens the page during the test, the page will be partially missing. This situation is often caused by compatibility issues that were not considered at the beginning of the design. When the project is about to be completed, you can use the following code to solve it
/* 方案1：这种方案虽然有效，但是由于不同页面的类名不同，需要构建多套代码 */
padding-top:env(safe-area-inset-top, 0rem); //兼容 IOS<11.2
/* 方案2：将你的高设置为内容的100%减去安全区域的距离即可，这种对我写的这个项目代码量最少，效果还不错的方案了 */
height: calc(100% - env(SAFE-AREA-INSET-TOP, 0rem)); //兼容 IOS<11.2
2. The height of the top div: 100%
Check one thing first
1. Height: 100% why does not fill the entire page
(1) html code
<div class="content"></div>
(2) css code
.content{
width: 100%;
height: 100%;
background-color: pink;
}
(3) Effect picture
(4) Reason
height: 100% is to obtain the full height of the parent element. If you have a careful understanding, you will know,
body和html的高默认都是为0的as shown in the figure
(5) to solve it
. Just set the height of 100% for the body and html. The css code is as follows, html is the same as step (1)
html, body{
height: 100%;
margin: 0;
padding: 0;
}
.content{
width: 100%;
height: 100%;
background-color: pink;
}
2. When the height of the top-level div is 100%, the env/constant you set at this time should limit the page to the safe area
Although safe-area-inset-* does not set the value is 0, but for better understanding, I personally will add this 0
body {
padding-top: constant(safe-area-inset-top: 0);
padding-top: env(safe-area-inset-top: 0);
padding-bottom: constant(safe-area-inset-top: 0);
padding-bottom: env(safe-area-inset-top: 0);
}
Summarize
（1）viewport-fit：
默认情况下或者设置为 auto和 contain效果相同。H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。
(2) The value of the env function (
值单位可以是px/em/vh/rem都可以，如果不填的话就是0)
- safe-area-inset-left: the distance between the safe area and the left border
- safe-area-inset-right: the distance between the safe area and the right border
- safe-area-inset-top: the distance between the safe area and the top border
- safe-area-inset-bottom: the distance between the safe area and the bottom border
（3）
顶层div的height最好设置100%而不是100vh。如果设置height: 100%没有效果，把body和html也加上height: 100% 的样式。
MDN env function reference address: https://developer.mozilla.org/zh-CN/docs/Web/CSS/env
Added - new viewport units
Rationale: While existing units work well on a desktop, it's a different story on a mobile device. Such as the problem that the address bar and tab bar are blocked in ios. To this end, the CSS Working Group has specified some new viewport states.
The viewport is divided into large viewport, small viewport and dynamic (the premise is to adjust the size of the viewport itself, otherwise the size of these viewport percentage units is fixed)
- Units for large viewports have the lv prefix. The units are lvw, lvh, lvi, lvb, lvmin, and lvmax.
(是英文的l，不是数字1) - Units for small viewports have the sv prefix. The units are
svw、svh, svi, svb, svmin, and svmax. - Dynamic viewport units have the dv prefix: dvw, dvh, dvi, dvb, dvmin, and dvmax
See the svw and svh marked in red above (emphasis)
As shown in the picture above, if you set the height of the top-level div to 100svh when you develop, it will automatically help you now that the distance between the top-level address bar and the menu bar is within the safe area, and no additional additions are required. Of course, such an advanced method has unavoidable limitations. Regarding compatibility issues, Google Chrome can only support 108 or higher. You can view compatibility issues through https://caniuse.com/
New viewport unit reference article: https://zhuanlan.zhihu.com/p/602168237