移动端适配rem&scale

  目录

移动端设置html元素的font-size代码,scale代码

移动端适配rem&scale

rem方式

1
2
3
4
5
6
7
8
9
10
11
12
(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 = clientWidth/20 + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

scale方式

1
2
3
4
5
6
var curWidth = window.screen.width; //iphone 6plus为414px
var targetWidth = 750; // 设计稿宽度
var scale = curWidth/targetWidth;
var meta = document.createElement("meta");
meta.name = "viewport";
meta.content = 'initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale+''; // 注意,没有width=device-width

scale方式就是把你按照设计稿宽度做的页面缩放到当前手机屏幕宽度。
scale = 屏幕视口宽度/设计稿宽度(实际制作的页面宽度)