美文网首页
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