前沿
在做和原生IOS和android 的H5頁面 時候 會有些交互上的差體驗 。
1.在iOS上頁面回彈效果 禁止
解決方法：
必須在最外層元素上 或者在 body ，html 添加
html, body {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
使用 fixed 布局 是為了固定位置，但是這樣就會導致
iOS H5頁面在滑動到底部的時候 不能滑動了，會不好使會卡住，
親自 實驗 有下面2個方案：
第一種方案：
1. jQuery 項目 引入inobounce 的js
地址 https://github.com/lazd/iNoBounce
<script src="inobounce.js"></script>
在你需要的滾動的元素上 添加 下方CSS
overflow: auto;
-webkit-overflow-scrolling: touch;
2. vue , react 項目中
下載 npm install inobounce -s
import inobounce from 'inobounce'
export default {
data() {
return { }
},
mounted() { },
created() {
let u = navigator.userAgent
if (u.indexOf('iPhone') > -1) {
inobounce.enable()
}
},
beforeDestroy() {
inobounce.disable()
},
methods: { }
}
</script>
（說明： 這個方法只適用 沒有多層彈出框的 ，就只限在一層的 H5上，不然還是有問題），嘗試改動源碼 依舊沒有用，有點頭疼
第二種方案：
在body上添加CSS屬性： 這個安全區域
body { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
第二張方案應該是最實用的 基本都解決了，推薦使用
2. iOS 上 把微信上把字體調大，加載頁面會先縮小后放大
解決方案：
在iOS上
在跟目錄的 CSS 上 寫
body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; }
Android 只能通過js 調整：
<script>
(function () {
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", handleFontSize);
document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
}
}
function handleFontSize() {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
WeixinJSBridge.on('menu:setfont', function () {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
});
}
})();
</script>
先更新到這些，之后在更新，希望能幫助到開放