蓝色div,紫色body（高度均为100%）黑色fixed定位bottom:0 。发现元素无法填满，定位也到不了底部。百思不得其解。在一整天的 调试过后，终于发现了奥秘

首先，你的页面meta标签要设置正确,最主要的就是 viewport-fit=cover

<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">   

其次，要根据 window.screen.height 的屏幕高度去设置媒体查询，去让 html 和 body 高度铺满整个webview。要是页面元素高度始终超过屏幕高度，那就不会出现这个问题
目前iphone 存在底部操作栏的物理像素为 812（x，11pro） 和 896（xr 11 pro max）

@media only screen and (device-height: 812px){
		html,body{min-height: 812px;}	/* 812是iphonex的物理高度，可设置成任意比屏幕高的px */
}
@media only screen and (device-height: 896px){
		html,body{min-height: 896px;}
}

最终效果图，完美！！！！