一、概述:
做了几年的移动端一直用 rem ,感觉最繁琐的就是 rem 的计算。随便可以用 css rem 自动计算,但是有时候感觉宽度跟高度的 rem 并不是完全准确。所以决定用 viewport 缩放来试试看效果,经过一些网友的帮忙测试,发现缩放 viewport 这种方法更简单、高效、准确
二、思路:
例如效果图是:750*1334(px)的源文件。
1、根据750 PSD源图 宽度尺寸进行比例缩放,高度并没有限制,所以高度是自由的
2、缩放viewport的同时,宽度跟高度是等比的,所以敢说这种方式比rem更准确。
三、js核心代码:
代码说明:切图时只需要按照PSD尺寸大小设置px即可,无需复杂的 rem 计算
js 代码:
(function (doc, win) {
var maxwidth = 750;//PSD源图 宽度尺寸
var oMeta = document.getElementById('viewport');
var docE1 = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
oMeta.content = "width=device-width,initial-scale=1.0,user-scalable=no";
var clientWidth = docE1.clientWidth;
var sca = (clientWidth / maxwidth);
sca = sca > 1 ? 1 : sca;
oMeta.content = "width=" + maxwidth + ",minimum-scale=" + sca + ",maximum-scale=" + sca + ",user-scalable=no,minimal-ui";
};
var orientchange = function () {
setTimeout(function () {
if (window.orientation == 180 || window.orientation == 0 || window.orientation == 90 || window.orientation == -90) {
recalc();
}
}, 200);
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);
doc.addEventListener(resizeEvt, orientchange, false);//横竖屏切换执行
})(document, window);
html 代码:
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">
注:maximum-scale,minximum-scale, user-scalable=no 属性的设置,可能会限制缩放效果
总结:
使用缩放 viewport 来做移动端适配确实简单,但在缩放时,有人反应页面会出现糊的情况。 是否采用,自行权衡
出处:
http://www.86y.org/art_detail.aspx?id=862【移动端自适配 力荐viewport缩放解决方案】幸凡学习网