国内知名互联网企业移动端H5尺寸适配方案

淘宝适配方案

<script>
    !function(e, t) {
        var n = t.documentElement
            , d = e.devicePixelRatio || 1;
        function i() {
            var e = n.clientWidth / 3.75;
            n.style.fontSize = e + "px"
        }
        if (function e() {
            t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e)
        }(),
        i(),
        e.addEventListener("resize", i),
        e.addEventListener("pageshow", function(e) {
            e.persisted && i()
        }),
        2 <= d) {
            var o = t.createElement("body")
                , a = t.createElement("div");
            a.style.border = ".5px solid transparent",
            o.appendChild(a),
            n.appendChild(o),
            1 === a.offsetHeight && n.classList.add("hairlines"),
            n.removeChild(o)
        }
    }(window, document)
</script>
使用方法:

设计图以iPhone6的分辨率为标准(750x1334)
把上面代码中的3.75改为7.5(如果设计图以375x667为标准则不用改)
前端写CSS时把设计图的单位统一以除以100,然后使用rem单位。
例: 设计图的某个字体大小为36px,css中为0.36rem。

拼多多适配方案


@media only screen and (max-width: 768px) {
    html {
        font-size:204.8px
    }
}

@media only screen and (max-width: 640px) {
    html {
        font-size:170.66667px
    }
}

@media only screen and (max-width: 480px) {
    html {
        font-size:128px
    }
}

@media only screen and (max-width: 414px) {
    html {
        font-size:110.4px
    }
}

@media only screen and (max-width: 412px) {
    html {
        font-size:109.86667px
    }
}

@media only screen and (max-width: 400px) {
    html {
        font-size:106.66667px
    }
}

@media only screen and (max-width: 393px) {
    html {
        font-size:104.8px
    }
}

@media only screen and (max-width: 375px) {
    html {
        font-size:100px
    }
}

@media only screen and (max-width: 360px) {
    html {
        font-size:96px
    }
}

@media only screen and (max-width: 345px) {
    html {
        font-size:92px
    }
}

@media only screen and (max-width: 320px) {
    html {
        font-size:85.33333px
    }
}

html {
    font-size: 26.66667vw;
    -webkit-text-size-adjust: none
}

body {
    font-size: 14px;
}

京东适配方案

html {
    font-size: 20px;
    font-size: 5.33333vw
}

@media screen and (max-width: 320px) {
    html {
        font-size:17.06667px
    }
}

@media screen and (min-width: 540px) {
    html {
        font-size:28.8px
    }
}

美团适配方案

<script>
	 //根据屏幕大小及dpi调整缩放和大小
	 (function() {
	     var scale = 1.0;
	     var ratio = 1;
	     if (window.devicePixelRatio >= 2) {
	         scale *= 0.5;
	         ratio *= 2;
	     }
	     var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
	     document.write(text);
	     document.documentElement.style.fontSize = 50*ratio + "px";
	 })();
 </script>

饿了么适配方案

<script>
	!function(e, t) {
	    function i() {
	        var t = n.getBoundingClientRect().width / 10;
	        n.style.fontSize = t + "px",
	        p.rem = e.rem = t
	    }
	    var a, r = e.document, n = r.documentElement, o = r.querySelector('meta[name="viewport"]'), l = r.querySelector('meta[name="flexible"]'), m = r.querySelector('meta[name="flexible-in-x5"]'), s = !0, c = 0, d = 0, p = t.flexible || (t.flexible = {});
	    if (o) {
	        console.warn("将根据已有的meta标签来设置缩放比例");
	        var u = o.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
	        u && (d = parseFloat(u[1]),
	        c = parseInt(1 / d))
	    } else if (l) {
	        var f = l.getAttribute("content");
	        if (f) {
	            var v = f.match(/initial\-dpr=([\d\.]+)/)
	              , h = f.match(/maximum\-dpr=([\d\.]+)/);
	            v && (c = parseFloat(v[1]),
	            d = parseFloat((1 / c).toFixed(2))),
	            h && (c = parseFloat(h[1]),
	            d = parseFloat((1 / c).toFixed(2)))
	        }
	    }
	    if (m && (s = "false" !== m.getAttribute("content")),
	    !c && !d) {
	        var x = (e.navigator.appVersion.match(/android/gi),
	        e.chrome)
	          , g = e.navigator.appVersion.match(/iphone/gi)
	          , b = e.devicePixelRatio
	          , w = /TBS\/\d+/.test(e.navigator.userAgent)
	          , y = !1;
	        try {
	            y = "true" === localStorage.getItem("IN_FLEXIBLE_WHITE_LIST")
	        } catch (e) {
	            y = !1
	        }
	        d = 1 / (c = g || x || w && s && y ? b >= 3 && (!c || c >= 3) ? 3 : b >= 2 && (!c || c >= 2) ? 2 : 1 : 1)
	    }
	    if (n.setAttribute("data-dpr", c),
	    !o)
	        if ((o = r.createElement("meta")).setAttribute("name", "viewport"),
	        o.setAttribute("content", "initial-scale=" + d + ", maximum-scale=" + d + ", minimum-scale=" + d + ", user-scalable=no, viewport-fit=cover"),
	        n.firstElementChild)
	            n.firstElementChild.appendChild(o);
	        else {
	            var E = r.createElement("div");
	            E.appendChild(o),
	            r.write(E.innerHTML)
	        }
	    e.addEventListener("resize", function() {
	        clearTimeout(a),
	        a = setTimeout(i, 300)
	    }, !1),
	    e.addEventListener("pageshow", function(e) {
	        e.persisted && (clearTimeout(a),
	        a = setTimeout(i, 300))
	    }, !1),
	    "complete" === r.readyState ? r.body.style.fontSize = 12 * c + "px" : r.addEventListener("DOMContentLoaded", function(e) {
	        r.body.style.fontSize = 12 * c + "px"
	    }, !1),
	    i(),
	    p.dpr = e.dpr = c,
	    p.refreshRem = i,
	    p.rem2px = function(e) {
	        var t = parseFloat(e) * this.rem;
	        return "string" == typeof e && e.match(/rem$/) && (t += "px"),
	        t
	    }
	    ,
	    p.px2rem = function(e) {
	        var t = parseFloat(e) / this.rem;
	        return "string" == typeof e && e.match(/px$/) && (t += "rem"),
	        t
	    }
	}(window, window.lib || (window.lib = {}))
</script>

网易适配方案

html {
    font-size: 13.33333vw
}

@media screen and (max-width: 320px) {
    html {
        font-size:42.667px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 321px) and (max-width:360px) {
    html {
        font-size:48px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size:50px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size:52.4px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 394px) and (max-width:412px) {
    html {
        font-size:54.93px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size:55.2px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 415px) and (max-width:480px) {
    html {
        font-size:64px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 481px) and (max-width:540px) {
    html {
        font-size:72px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 541px) and (max-width:640px) {
    html {
        font-size:85.33px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 641px) and (max-width:720px) {
    html {
        font-size:96px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 721px) and (max-width:768px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 769px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}

百度适配方案

html {
    font-size: 100px
}

@media screen and (max-width: 360px) {
    html {
        font-size:90px;
        line-height: 90px
    }
}

body {
    font-size: 16px;
}

腾讯适配方案

<script>
	(function(base, min, max, scaling){
	  var cacheWidth = 0;
	  var timer;
	  var docEl = document.documentElement;
	  var resizeEvt = 'onorientationchange' in window ? 'orientationchange' : 'resize';
	  var recalc = function () {
	    var clientWidth = docEl.clientWidth;
	    if (!clientWidth) return;
	    clientWidth = Math.min(clientWidth, max);
	    clientWidth = Math.max(clientWidth, min);
	    if(cacheWidth !== clientWidth) {
	      clearInterval(timer);
	      cacheWidth = clientWidth;
	      docEl.style.fontSize = scaling * (clientWidth / base) + 'px';
	    }
	  }
	  if (!document.addEventListener) return;
	  window.addEventListener(resizeEvt, function() {
	    timer = setInterval(recalc, 10);
	  });
	  recalc();
	})(375, 300, 768, 100);
</script>

华为商城适配方案

@media all and (min-width: 721px) {
    html {
        font-size:250%
    }
}

@media all and (max-width: 720px) {
    html {
        font-size:250%
    }
}

@media all and (max-width: 640px) {
    html {
        font-size:222.222%
    }
}

@media all and (max-width: 540px) {
    html {
        font-size:187.5%
    }
}

@media all and (max-width: 480px) {
    html {
        font-size:166.668%
    }
}

@media all and (max-width: 432px) {
    html {
        font-size:150%
    }
}

@media all and (max-width: 414px) {
    html {
        font-size:143.75%
    }
}

@media all and (max-width: 400px) {
    html {
        font-size:138.888%
    }
}

@media all and (max-width: 393px) {
    html {
        font-size:130.204%
    }
}

@media all and (max-width: 375px) {
    html {
        font-size:130.204%
    }
}

@media all and (max-width: 360px) {
    html {
        font-size:125%
    }
}

@media all and (max-width: 340px) {
    html {
        font-size:118.056%
    }
}

@media all and (max-width: 320px) {
    html {
        font-size:111.112%
    }
}

小米适配方案

<script>
    !function(e) {
        var t = e.document
          , n = t.documentElement
          , i = e.devicePixelRatio || 1
          , a = "orientationchange"in e ? "orientationchange" : "resize"
          , d = function() {
            var e = n.getBoundingClientRect().width || 360;
            (1 == i || 720 < e) && (e = 720),
            n.style.fontSize = e / 7.2 + "px"
        };
        n.setAttribute("data-dpr", i),
        t.addEventListener && (e.addEventListener(a, d, !1),
        "complete" === t.readyState || t.addEventListener("DOMContentLoaded", function() {
            setTimeout(d)
        }, !1))
    }(window)
</script>

新浪适配方案

<script>
	!function(w, d, m) {
	    function r() {
	        var t = 100
	          , o = 750
	          , e = d.documentElement.clientWidth || w.innerWidth
	          , n = m.max(m.min(e, 480), 320)
	          , h = 50;
	        320 >= n && (h = m.floor(n / o * t * .99)),
	        n > 320 && 362 >= n && (h = m.floor(n / o * t * 1)),
	        n > 362 && 375 >= n && (h = m.floor(n / o * t * 1)),
	        n > 375 && (h = m.floor(n / o * t * .97)),
	        d.querySelector("html").style.fontSize = h + "px"
	    }
	    ;r();
	    w.onresize = function() {
	        r()
	    }
	}(window, document, Math);
</script>

微博适配方案

<script>
	!function(e) {
	  var a, i = navigator.userAgent.toLowerCase(), n = document.documentElement, t = parseInt(n.clientWidth);
	    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || i.indexOf("like mac os x") > 0) {
	        var s = /os [\d._]*/gi
	          , o = i.match(s);
	        a = (o + "").replace(/[^0-9|_.]/gi, "").replace(/_/gi, ".")
	    }
	    var r = a + "";
	    "undefined" != r && r.length > 0 && (a = parseInt(r),
	    a >= 8 && (375 == t || 667 == t || 320 == t || 568 == t || 480 == t) ? n.className = "iosx2" : (a >= 8 && 414 == t || 736 == t) && (n.className = "iosx3")),
	    /(Android)/i.test(navigator.userAgent) && (n.className = "android")
	}(window);
</script>

搜狐适配方案

<script>
    (function(c, f) {
        var s = c.document;
        var b = s.documentElement;
        var m = s.querySelector('meta[name="viewport"]');
        var n = s.querySelector('meta[name="flexible"]');
        var a = 0;
        var r = 0;
        var l;
        var d = f.flexible || (f.flexible = {});
        if (m) {
            var e = m.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
            if (e) {
                r = parseFloat(e[1]);
                a = parseInt(1 / r)
            }
        } else {
            if (n) {
                var j = n.getAttribute("content");
                if (j) {
                    var q = j.match(/initial\-dpr=([\d\.]+)/);
                    var h = j.match(/maximum\-dpr=([\d\.]+)/);
                    if (q) {
                        a = parseFloat(q[1]);
                        r = parseFloat((1 / a).toFixed(2))
                    }
                    if (h) {
                        a = parseFloat(h[1]);
                        r = parseFloat((1 / a).toFixed(2))
                    }
                }
            }
        }
        if (!a && !r) {
            var p = c.navigator.appVersion.match(/android/gi);
            var o = c.navigator.appVersion.match(/iphone/gi);
            var k = c.devicePixelRatio;
            if (o) {
                if (k >= 3 && (!a || a >= 3)) {
                    a = 3
                } else {
                    if (k >= 2 && (!a || a >= 2)) {
                        a = 2
                    } else {
                        a = 1
                    }
                }
                b.setAttribute("class", "ios")
            } else {
                a = 1;
                b.setAttribute("class", "android")
            }
            r = 1 / a
        }
        b.setAttribute("data-dpr", a);
        if (!m) {
            m = s.createElement("meta");
            m.setAttribute("name", "viewport");
            m.setAttribute("content", "initial-scale=" + r + ", maximum-scale=" + r + ", minimum-scale=" + r + ", user-scalable=no");
            if (b.firstElementChild) {
                b.firstElementChild.appendChild(m)
            } else {
                var g = s.createElement("div");
                g.appendChild(m);
                s.write(g.innerHTML)
            }
        }
        function i() {
            var t = b.getBoundingClientRect().width;
            if (t / a > 540) {
                t = 540 * a
            }
            var u = t / 10;
            b.style.fontSize = u + "px";
            d.rem = c.rem = u
        }
        c.addEventListener("resize", function() {
            clearTimeout(l);
            l = setTimeout(i, 300)
        }, false);
        c.addEventListener("pageshow", function(t) {
            if (t.persisted) {
                clearTimeout(l);
                l = setTimeout(i, 300)
            }
        }, false);
        if (s.readyState === "complete") {
            s.body.style.fontSize = 12 * a + "px"
        } else {
            s.addEventListener("DOMContentLoaded", function(t) {
                s.body.style.fontSize = 12 * a + "px"
            }, false)
        }
        i();
        d.dpr = c.dpr = a;
        d.refreshRem = i;
        d.rem2px = function(u) {
            var t = parseFloat(u) * this.rem;
            if (typeof u === "string" && u.match(/rem$/)) {
                t += "px"
            }
            return t
        }
        ;
        d.px2rem = function(u) {
            var t = parseFloat(u) / this.rem;
            if (typeof u === "string" && u.match(/px$/)) {
                t += "rem"
            }
            return t
        }
    }
    )(window, window["lib"] || (window["lib"] = {}));
</script>
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值