字體適配

tolerious 發布于2019-08-21 10:29 / 690人閱讀

(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云服務器云服務器適配問題機型適配屏幕適配適配座

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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