淘宝适配方案
<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>