移动端项目踩坑记录

1、限制操作微信字体放大缩小影响页面布局
2、限制页面在ios平台的iphone或者ipad，可以上下左右移动，而Android版则不会
3、移动端meta配置
4、允许页面横屏，字体变大，限制字体大小不影响页面的布局
5、在非微信端打开微信小程序时，判断用户是否安装了微信应用

1、限制操作微信字体放大缩小影响页面布局

     // 安卓手机禁止字体放大js代码
      function rejectZoom() {
        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 });
          });
        }
      }
     //iphone手机禁止字体放大
     body {
      -webkit-text-size-adjust: 100% !important;
     text-size-adjust: 100% !important;
     -moz-text-size-adjust: 100% !important;
     overflow-x: hidden;
     }

2、限制页面在ios平台的iphone或者ipad，可以上下左右移动，而Android版则不会

    let u = navigator.userAgent;
    document.body.addEventListener(
      'touchmove',
      function (e) {
        let touch = e.targetTouches[0];
        let endPos = { x: touch.pageX - startPos.x, y: touch.pageY - startPos.y };
        let isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动
        if (!isScrolling) {
          e.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
        }
      },
      { passive: false }
    ); // passive 参数不能省略，用来兼容ios和android

3、移动端meta配置

<!-- 禁止浏览器从本地计算机的缓存中访问页面内容 -->
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <!-- 渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 移动端适配 -->
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <meta name="google" content="notranslate" />
    <!-- 苹果工具栏和菜单栏：使用 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <!-- 苹果状态栏颜色：白色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="white" />
    <!-- 横竖屏属性设置：纵向 -->
    <meta name="screen-orientation" content="portrait" />
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes" />
    <!-- 浏览器模式：app应用 -->
    <meta name="browsermode" content="application" />
    <!-- X5横竖屏属性设置：纵向 -->
    <meta name="x5-orientation" content="portrait" />
    <!-- X5 内核 强制全屏 -->
    <meta name="x5-fullscreen" content="true" />
    <!--  X5 内核 浏览器模式：app应用 -->
    <meta name="x5-page-mode" content="app" />

4、允许页面横屏，字体变大，限制字体大小不影响页面的布局

// 设置 rem 基准值
(function flexible(window, document) {
  const docEl = document.documentElement;
  const dpr = window.devicePixelRatio || 1;

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + 'px';
    } else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit() {
    let rem = docEl.clientWidth / 10;
    // 判断屏幕是横屏还是竖屏
    if (window.orientation !== 0 && window.orientation !== 180 && window.workbench_clientType === 2) {
      // 为了保持字体大小在横竖屏状态下不变，横屏时要根据高度计算字体基准
      if (window.wps && window.wps.getSystemInfo) {
        rem = docEl.clientHeight/ 10;//如果是横屏的状态下，用屏幕的高度（即横屏时的宽度）作为基准
      }
    }
    docEl.style.fontSize = rem + 'px';
  }

  setRemUnit();

  // reset rem unit on page resize
  const event = 'onorientationchange' in window ? 'onorientationchange' : 'resize';
  window.addEventListener(event, setRemUnit, false);
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    const fakeBody = document.createElement('body');
    const testElement = document.createElement('div');
    testElement.style.border = '.5px solid transparent';
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines');
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

5、在非微信端打开微信小程序时，判断用户是否安装了微信应用

function openMini(){
  // 绑定监听事件
    window.addEventListener('visibilitychange', handlePageHide, true);
    // 首先判断用户是否安装了微信,根据调起小程序1s内，页面是否失活来判断
    let t = 1000；
    timer.value = setTimeout(function () {
      return showMessage('请先安装微信小程序');
    }, t);
    **操作打开微信小程序**
}
function clearTimer() {
  clearTimeout(timer.value);
  timer.value = null;
  window.removeEventListener('visibilitychange', handlePageHide, false);
}
function handlePageHide() {
  clearTimer();
}

移动端项目踩坑记录

目录

1、限制操作微信字体放大缩小影响页面布局