IOS H5页面的回弹 （及其他小问题）

前沿

在做和原生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>

　　

先更新到这些，之后在更新，希望能帮助到开放