H5项目在ios上出现的各种疑难杂症记录

1、safari浏览器默认背景变成绿色

 Safari 15 之后，可以通过 head 中的 <meta name="theme-color" content="#ecd96f">来指定 iOS 中 Safari 的状态栏背景颜色的，可以根据 perfers-color-schema 来指定日常模式、暗黑模式，详情见  Safari 15: New UI, Theme Colors, and… a CSS-Tricks Cameo!

解决方法：

在  vite.config.ts 中添加对应配置

import { defineConfig } from 'vite'import react from '@vitejs/plugin-react-swc'
import path from 'path'
import { VitePWA, VitePWAOptions } from 'vite-plugin-pwa'
const pwaConfig: Partial<VitePWAOptions> = {  
    registerType: 'autoUpdate',  
    workbox: {   
        clientsClaim: true,    
        skipWaiting: true,    
        mode: 'development',    
        globPatterns: [      
            '**/*.{js,jsx,ts,tsx,css,less,json,ico,png,jpg,jpeg,svg,gif,woff,woff2,ttf,eot}'    
        ],    
        globIgnores: ['**/config.js', '**/index.html'],  
    },

+  manifest: {
+    theme_color: 'none'
+  }


}
// https://vitejs.dev/config/
export default defineConfig({  
    base: '/',  
    resolve: {    
        //设置别名    
        alias: {      
            '@': path.resolve(__dirname, 'src'),      
            components: path.resolve(__dirname, 'src/components')    
        }  
    },  
    plugins: [VitePWA(pwaConfig), react()],  
    server: {    
        port: 8085,    
        fs: {      
            allow: ['../../../']    
        }  
    },  
    build: {    
        sourcemap: false,    
        outDir: 'docker/dist',    
        minify: 'terser',    
        terserOptions: {      
            // delete console/debugger      
            compress: {        
                drop_console: true,        
                drop_debugger: true      
            }    
        },    
        rollupOptions: {      
            output: {        
                // Static resource classification and packaging        
                chunkFileNames: 'assets/js/[name]-[hash].js',        
                entryFileNames: 'assets/js/[name]-[hash].js',        
                assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'      
            },      
            //忽略cesium依赖包      
            external: ['cesium/Source/**']    
        }  
    },  
    css: {    
        preprocessorOptions: {      
            less: {        
                javascriptEnabled: true      
            }    
        }  
    }
})

2、在浏览器中获取到的安全区域的值一直为0

env()和constant()是ios11新增特性，用于设定安全区域与边界的距离，包括 safe-area-inset-left、safe-area-inset-right、safe-area-inset-top、safe-area-inset-bottom 四个变量

而要使用这两个函数，需要在html中添加一个新的视口元值：

<meta name="viewport" content="... viewport-fit=cover" />

在css中使用：

html, body {  
    height: 100vh;  
    margin: 0;  
    padding: 0;  
    background: #f5f5f5;  
    /* 关键的设置 */  
    padding-bottom: constant(safe-area-inset-bottom);  
    padding-bottom: env(safe-area-inset-bottom);
}

但是在浏览器中并没有生效，没有找到原因。。。

所以开始了曲线救国，将根节点的高度设置为window.innerHeight。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

window.onload = function() {  
    adjustPageHeight();
};
window.onresize = function() {  
    adjustPageHeight();
};
function adjustPageHeight() {  
    const windowHeight = window.innerHeight;  
    document.querySelector("#root").style.height = windowHeight + 'px'  
}

createRoot(document.getElementById('root')).render(  
    <StrictMode>    
        <App />  
    </StrictMode>,
)

然后将页面容器的高度设为 100%  ，这样safari下方的搜索框就不会遮挡页面内容了。

未完待续。。。