字体适配

tolerious 发布于2019-08-21 10:29 / 590人阅读

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * ((clientWidth >= 640 ? 640 : clientWidth) / 320) + "px";
        };
        recalc();
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

(function (doc, win) {
        var docEl = doc.documentElement,
          isIOS = navigator.userAgent.match(/iphone|ipod|ipad/gi),
          dpr = isIOS? Math.min(win.devicePixelRatio, 3) : 1,
          dpr = window.top === window.self? dpr : 1, //被iframe引用时，禁止缩放
          dpr = 1, // 首页引用IFRAME，强制为1
          scale = 1 / dpr,
          resizeEvt = "orientationchange" in window ? "orientationchange" : "resize";
        docEl.dataset.dpr = win.devicePixelRatio;
        if(navigator.userAgent.match(/iphone/gi) && screen.width == 375 && win.devicePixelRatio == 2){
          docEl.classList.add("iphone6")
        }
        if(navigator.userAgent.match(/iphone/gi) && screen.width == 414 && win.devicePixelRatio == 3){
          docEl.classList.add("iphone6p")
        }
        var metaEl = doc.createElement("meta");
        metaEl.name = "viewport";
        metaEl.content = "initial-scale=" + scale + ",maximum-scale=" + scale + ", minimum-scale=" + scale;
        docEl.firstElementChild.appendChild(metaEl);
        var recalc = function () {
            var width = docEl.clientWidth;
            if (width / dpr > 640) {
                width = 640 * dpr;
            }
            docEl.style.fontSize = 100 * (width / 640) + "px";
          };
        recalc()
        if (!doc.addEventListener) return;
        // win.addEventListener(resizeEvt, recalc, false);
      })(document, window);

云服务器 GPU云服务器适配问题机型适配屏幕适配适配座

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85633.html

移动屏幕适配

摘要：简介移动屏幕适配是一个比较令人头疼的问题，这是我写的一个通过动态设置的移动屏幕适配的工具函数，包括定宽和两种适配方法，目前在我自己的项目中用起来还不错，后续也会优化调整，地址这里。 2015-10-16更新。简介移动屏幕适配是一个比较令人头疼的问题，这是我写的一个通过动态设置viewport的移动屏幕适配的工具函数，包括定宽和rem两种适配方法，目前在我自己的项目中用起来还不错，后...

dreamGong 2019-08-21 10:35 评论0 收藏0
rem : web app适配的秘密武器

摘要：有与两种方式来调整元素大小的值。如果你的页面还需要适配到端，那么就老老实实的使用吧。在上面的实现中，我通过判断设定了字体大小的范围来避免上显示过于夸张。二有的同学可能对的适配有点误解。最近看到这样一个提问：我有一个750 x 1500尺寸的设计稿，设计稿上有一个150 x 50的按钮，那么在写页面布局的时候，应该如何确定按钮的尺寸呢？。大多数同学在回答的时候提到了rem。但我发现很多...

MageekChiu 2019-08-30 13:03 评论0 收藏0
rem : web app适配的秘密武器

摘要：有与两种方式来调整元素大小的值。如果你的页面还需要适配到端，那么就老老实实的使用吧。在上面的实现中，我通过判断设定了字体大小的范围来避免上显示过于夸张。二有的同学可能对的适配有点误解。最近看到这样一个提问：我有一个750 x 1500尺寸的设计稿，设计稿上有一个150 x 50的按钮，那么在写页面布局的时候，应该如何确定按钮的尺寸呢？。大多数同学在回答的时候提到了rem。但我发现很多...

KaltZK 2019-08-19 18:22 评论0 收藏0
rem : web app适配的秘密武器

摘要：有与两种方式来调整元素大小的值。如果你的页面还需要适配到端，那么就老老实实的使用吧。在上面的实现中，我通过判断设定了字体大小的范围来避免上显示过于夸张。二有的同学可能对的适配有点误解。最近看到这样一个提问：我有一个750 x 1500尺寸的设计稿，设计稿上有一个150 x 50的按钮，那么在写页面布局的时候，应该如何确定按钮的尺寸呢？。大多数同学在回答的时候提到了rem。但我发现很多...

since1986 2019-06-27 13:44 评论0 收藏0