移动端H5postion:fixed，安卓苹果效果不同解决方案，避免软键盘被顶起样式不同！

H5下底部固定css，安卓苹果不同效果解决方案。

对于经常开发移动端H5的朋友来说，肯定是会遇到一个问题，就是在安卓手机下，固定在底部的“技术支持”或者其他页面元素，被软键盘顶起，从而影响了页面美观性。那么如何解决呢？或者说如何避免呢？下面我提供了一个解决方案。
我的代码基于Vue3+Uniapp的框架，使用React，或者Vue2的朋友自行理解逻辑，更改自己的代码即可。

1. 尝试
   在出现此问题的页面中我们先尝试如何解决，下面是我在该页面的代码，浅显易懂。

   // 手机默认高度
   const defaultPhoneHeight = ref(0);
   // 手机最新高度
   const nowPhoneHeight = ref(0);
   // 键盘是否被弹起
   const isUp = ref(false);
   
   onLoad(() => {
   	defaultPhoneHeight.value = window.innerHeight;
   	window.onresize = () => {
   		nowPhoneHeight.value = window.innerHeight;
   	};
   });
   onUnload(() => {
   	window.onresize = null;
   });
   watch(
   	() => nowPhoneHeight.value,
   	(val) => {
   		if (defaultPhoneHeight.value != nowPhoneHeight.value) {
   			//手机键盘被唤起了。
   			isUp.value = true;
   		} else {
   			//手机键盘被关闭了。
   			isUp.value = false;
   		}
   	}
   );
   

   其中isUp是用来判断键盘是否被弹起的响应式变量，由于我遇到的问题是，放在底部的技术支持被顶起，那么我就在该页面的
   从
   <technical-support />
   更改为
   <technical-support v-show="!isUp"/>
   也就是说当键盘弹起时，在苹果手机下，不处理的结果是键盘覆盖这个组件，安卓弹起这个组件在键盘上面。处理后，键盘弹起，组件隐藏。效果和产品要求一致。
   但由于很多页面用到这个，所以我将它作为一个hooks封装起来。
2. Hooks
   /hooks/Listeningkeyboard.ts代码如下，其中我只暴露isUp给外界使用。

import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import { reactive, ref, onMounted, watch } from "vue";
export default function () {
	const defaultPhoneHeight = ref(0);
	const nowPhoneHeight = ref(0);
	const isUp = ref(false);
	onLoad(() => {
		defaultPhoneHeight.value = window.innerHeight;
		window.onresize = () => {
			nowPhoneHeight.value = window.innerHeight;
		};
	});
	onUnload(() => {
		window.onresize = null;
	});
	watch(
		() => nowPhoneHeight.value,
		(val) => {
			if (defaultPhoneHeight.value != nowPhoneHeight.value) {
				//手机键盘被唤起了。
				isUp.value = true;
			} else {
				//手机键盘被关闭了。
				isUp.value = false;
			}
		}
	);
	return {
		isUp,
	};
}

这样我在众多页面中只要引入以下代码就可以实现安卓软键盘弹起，底部固定布局不影响界面的问题了！

// 引入
import useListeningKeydoard from "@/hooks/Listeningkeyboard"
// 解构包暴露值
const { isUp } = useListeningKeydoard();

<!-- 使用 -->
<technical-support  v-if="!isUp"/>

快去试试你的项目吧！如解决请点赞收藏关注！