1. 设置viewport-fit=cover
  1. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
  1. 设置安全区域
  1. .u-safeAreaInset-top {
  2.   height: constant(safe-area-inset-top) !important;
  3.   height: env(safe-area-inset-top) !important;
  5. }
  6. .u-safeAreaInset-bottom {
  7.   height: constant(safe-area-inset-bottom) !important;
  8.   height: env(safe-area-inset-bottom) !important;  
  9. }
  1. 实例如下
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
  6.     <title>Document</title>
  7.     <style>
  8.         .u-safeAreaInset-top {
  9.             height: constant(safe-area-inset-top) !important;
  10.             height: env(safe-area-inset-top) !important;
  11.         }
  12.         .u-safeAreaInset-bottom {
  13.             height: constant(safe-area-inset-bottom) !important;
  14.             height: env(safe-area-inset-bottom) !important;  
  15.         }
  16.         html, body {
  17.             padding: 0;
  18.             margin: 0;
  19.             width: 100%;
  20.             height: 100%;
  21.             overflow: hidden;
  22.         }
  23.         .container {
  24.             width: 100vw;
  25.             height: 100vh;
  26.             overflow: hidden;
  27.             box-sizing: border-box;
  28.             padding-bottom: 12vw;
  29.             background-color: bisque;
  30.             position: relative;
  31.         }
  33.         .body {
  34.             width: 100%;
  35.             height: 100%;
  36.             overflow-y: auto;
  37.         }
  39.         .content {
  40.             height: 3000px;
  41.             background-color: chocolate;
  42.         }
  44.         .footer {
  45.             position: fixed;
  46.             width: 100%;
  47.             height: 12vw;
  48.             left: 0;
  49.             bottom: 0;
  50.             background-color: #369;
  51.         }
  52.     </style>
  53. </head>
  55. <body>
  56.     <div class="container">
  57.         <div class="body">
  58.             <div class="content"></div>
  59.         </div>
  60.         <div class="footer">
  61.         </div>
  62.     </div>
  63. </body>
  65. </html>

如需局部使用，如下

  1. .safeAreaTop {
  2.   padding-top: constant(safe-area-inset-top);
  3.   padding-top: env(safe-area-inset-top);
  4. }
  6. .safeAreaBottom {
  7.   padding-bottom: constant(safe-area-inset-bottom);
  8.   padding-bottom: env(safe-area-inset-bottom);
  9. }