美文网首页
限制在微信内打开以及移动端字体大小适配

限制在微信内打开以及移动端字体大小适配

作者: Young_Kind | 来源:发表于2018-06-19 10:02 被阅读8次
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
</head>
<body>
<div id="app-box"></div>
</body>
</html>

<script>
//设置移动端数字大小
  (function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        //var clientWidth = docEl.clientWidth;
        let latestRes = 20;
        var clientWidth = document.getElementById('app').clientWidth;
        if (!clientWidth) return;

        if (20 * (clientWidth / 375) > latestRes) {
          docEl.style.fontSize = latestRes + 'px';
        } else {
          docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
        }

      };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);

  //限定微信内打开
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf('micromessenger') != -1;
    var isAndroid = ua.indexOf('android') != -1;
    var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
    if (!isWeixin) {
      document.head.innerHTML = '<title>抱歉,出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">';
      document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>';
    }

</script>




相关文章

网友评论

      本文标题:限制在微信内打开以及移动端字体大小适配

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