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

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

作者: 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