美文网首页
vue点击input框页面缩放问题

vue点击input框页面缩放问题

作者: 斯爱米诺子 | 来源:发表于2018-10-16 15:31 被阅读0次

    处理安卓手机点击input导致页面缩放问题

    function androidInputFont() {
      let u = navigator.userAgent, app = navigator.appVersion;
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
      let docEl = document.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
          let clientWidth = isAndroid ? docEl.offsetWidth : docEl.clientWidth;
          let clientHeight = isAndroid ? docEl.offsetHeight : docEl.clientHeight;
          if (!clientWidth) return;
          if(isAndroid && clientWidth < 400) {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
          }else if(isAndroid && clientHeight < 400) {
            docEl.style.fontSize = 100 * (clientWidth/ 750) + 'px';
          }else if(clientWidth > clientHeight) {
            docEl.style.fontSize = 100 * (clientHeight / 750) + 'px';
          }else {
            docEl.style.fontSize = 100 * (clientWidth/ 750) + 'px';
          }
        };
      if (!document.addEventListener) return;
      window.addEventListener(resizeEvt, recalc, false);
      document.addEventListener('DOMContentLoaded', recalc, false);
    }
    

    相关文章

      网友评论

          本文标题:vue点击input框页面缩放问题

          本文链接:https://www.haomeiwen.com/subject/eamczftx.html