移動(dòng)端項(xiàng)目踩坑記錄

1、限制操作微信字體放大縮小影響頁面布局
2、限制頁面在ios平臺(tái)的iphone或者ipad鞭盟，可以上下左右移動(dòng)，而Android版則不會(huì)
3瑰剃、移動(dòng)端meta配置
4齿诉、允許頁面橫屏，字體變大晌姚，限制字體大小不影響頁面的布局
5粤剧、在非微信端打開微信小程序時(shí)，判斷用戶是否安裝了微信應(yīng)用

1挥唠、限制操作微信字體放大縮小影響頁面布局

     // 安卓手機(jī)禁止字體放大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手機(jī)禁止字體放大
     body {
      -webkit-text-size-adjust: 100% !important;
     text-size-adjust: 100% !important;
     -moz-text-size-adjust: 100% !important;
     overflow-x: hidden;
     }

2抵恋、限制頁面在ios平臺(tái)的iphone或者ipad，可以上下左右移動(dòng)宝磨，而Android版則不會(huì)

    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時(shí)弧关，表示縱向滑動(dòng)，0為橫向滑動(dòng)
        if (!isScrolling) {
          e.preventDefault(); //阻止觸摸事件的默認(rèn)行為唤锉，即阻止?jié)L屏
        }
      },
      { passive: false }
    ); // passive 參數(shù)不能省略世囊，用來兼容ios和android

3、移動(dòng)端meta配置

<!-- 禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面內(nèi)容 -->
    <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" />
    <!-- 移動(dòng)端適配 -->
    <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" />
    <!-- 蘋果狀態(tài)欄顏色：白色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="white" />
    <!-- 橫豎屏屬性設(shè)置：縱向 -->
    <meta name="screen-orientation" content="portrait" />
    <!-- UC強(qiáng)制全屏 -->
    <meta name="full-screen" content="yes" />
    <!-- 瀏覽器模式：app應(yīng)用 -->
    <meta name="browsermode" content="application" />
    <!-- X5橫豎屏屬性設(shè)置：縱向 -->
    <meta name="x5-orientation" content="portrait" />
    <!-- X5 內(nèi)核 強(qiáng)制全屏 -->
    <meta name="x5-fullscreen" content="true" />
    <!--  X5 內(nèi)核 瀏覽器模式：app應(yīng)用 -->
    <meta name="x5-page-mode" content="app" />

4窿祥、允許頁面橫屏株憾，字體變大，限制字體大小不影響頁面的布局

// 設(shè)置 rem 基準(zhǔn)值
(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) {
      // 為了保持字體大小在橫豎屏狀態(tài)下不變晒衩，橫屏?xí)r要根據(jù)高度計(jì)算字體基準(zhǔn)
      if (window.wps && window.wps.getSystemInfo) {
        rem = docEl.clientHeight/ 10;//如果是橫屏的狀態(tài)下嗤瞎，用屏幕的高度（即橫屏?xí)r的寬度）作為基準(zhǔn)
      }
    }
    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、在非微信端打開微信小程序時(shí)浸遗，判斷用戶是否安裝了微信應(yīng)用

function openMini(){
  // 綁定監(jiān)聽事件
    window.addEventListener('visibilitychange', handlePageHide, true);
    // 首先判斷用戶是否安裝了微信,根據(jù)調(diào)起小程序1s內(nèi)，頁面是否失活來判斷
    let t = 1000箱亿；
    timer.value = setTimeout(function () {
      return showMessage('請(qǐng)先安裝微信小程序');
    }, t);
    **操作打開微信小程序**
}
function clearTimer() {
  clearTimeout(timer.value);
  timer.value = null;
  window.removeEventListener('visibilitychange', handlePageHide, false);
}
function handlePageHide() {
  clearTimer();
}

移動(dòng)端項(xiàng)目踩坑記錄

目錄

1挥唠、限制操作微信字體放大縮小影響頁面布局