uni-app 打包h5嵌入APP状态栏问题

uni-app打包H5嵌入原生APP时，状态栏问题通常表现为：页面顶部内容被状态栏遮挡，或者状态栏背景色与页面不协调。本质原因是：H5页面在原生WebView中默认从屏幕最顶部（包括状态栏区域）开始渲染，而原生状态栏会覆盖在WebView之上，导致页面头部被遮挡。

常见的处理方式分为两类：

1. 通过uni-app内置变量动态适配
   uni-app提供了uni.getSystemInfoSync().statusBarHeight，可在页面加载时获取真实的状态栏高度（单位px），然后动态设置页面顶部元素的padding-top或margin-top。例如：

   const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
   // 在页面根元素或第一个块级元素上设置内边距
   

   该变量在Android和iOS上数值不同（Android通常为24-48px，iOS为20或44px）。

2. 利用CSS的env(safe-area-inset-top)
   对于支持安全区域的浏览器内核（iOS 11+、部分Android WebView），可以直接在CSS中设置：

   .page {
     padding-top: constant(safe-area-inset-top); /* 旧写法 */
     padding-top: env(safe-area-inset-top);       /* 新写法 */
   }