网站首页 文章专栏 HTML移动端字体的自适应

HTML移动端字体的自适应

编辑时间:2018-06-05 18:56:02 作者:苹果 浏览量:2125


    前言:移动端不同的机型,屏幕大小会对字体进行不同的缩放,为了更好的兼容多个版本的移动端,可用JS进行控制


在头部添加以下代码即可:

<script type="text/javascript">

 !function(e, t) {var n = e.documentElement, i = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), a = i ? Math.min(t.devicePixelRatio, 3) : 1, a = window.top === window.self ? a : 1, d = "orientationchange" in window ? "orientationchange" : "resize"; n.dataset.dpr = a; var o = function() {var e = n.clientWidth; e / a > 750 && (e = 750 * a), n.dataset.width = e, n.dataset.percent = 100 * (e / 750), n.style.fontSize = 28 * (e / 750) + "px"}; o(), e.documentElement.classList.add("iosx" + t.devicePixelRatio), e.addEventListener && t.addEventListener(d, o, !1) }(document, window) 

</script>



    出自:何冰华个人网站

    地址:https://www.hebinghua.com/

    转载请注明出处


来说两句吧
最新评论