美文网首页
h5移动端字体自适应

h5移动端字体自适应

作者: 喜欢走弯路的人 | 来源:发表于2023-09-27 12:26 被阅读0次

index.html文件script中加入以下内容

h5移动端字体自适应

<script>

  fontSize()

  function fontSize() {

    var mobileType = ismobile(0)

    //通过navigator判断是否是移动设备

    if ((navigator.userAgent.match(

        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i

      ))) {

      //在移动端

      (function(doc, win) {

        //  html

        var docEl = doc.documentElement,

          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

          recalc = function() {

            var clientWidth = docEl.clientWidth;

            if (!clientWidth) return;

            // console.log("ty",mobileType);

            if (mobileType == "Android") {

              console.log("我是安卓----------");

              clientWidth = (clientWidth > 768) ? 768 : clientWidth;

              // docEl.style.fontSize = 16 * (clientWidth / 375) + 'px'; //这个10可以根据自己使用的数据来调整

              docEl.style.fontSize = userSetFontSize * (clientWidth / 375) + 'px'

            }

            if (mobileType == "iPhone") {

              console.log("我是苹果----------");

              clientWidth = (clientWidth > 768) ? 768 : clientWidth;

              // docEl.style.fontSize = 16 * (clientWidth / 375) + 'px'; //这个10可以根据自己使用的数据来调整

              docEl.style.fontSize = userSetFontSize * (clientWidth / 375) + 'px'; //这个10可以根据自己使用的数据来调整

            }

          };

        if (!doc.addEventListener) return;

        win.addEventListener(resizeEvt, recalc, false);

        recalc();

      })(document, window);

      //移动端  文字适配

    } else { //如果是pc端我们可以像微信公众号那样,设置最大宽度为740px

      document.documentElement.style.margin = "0 auto"

      //PC端

    }

  }

  // -识别IOS还是安卓

  // param test: 0:iPhone    1:Android

  function ismobile(test) {

    var u = navigator.userAgent,

      app = navigator.appVersion

    if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (

        /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/

        .test(navigator.userAgent))) {

      if (window.location.href.indexOf("?mobile") < 0) {

        try {

          if (/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)) {

            return "iPhone";

          } else {

            return "Android";

          }

        } catch (e) {

          //            alert(e);

        }

      }

    } else if (app.indexOf('iPad') > -1 || app.indexOf('iPhone') > -1) {

      return "iPhone";

    } else {

      return "Android";

    }

  };

</script>

相关文章

网友评论

      本文标题:h5移动端字体自适应

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