【转】移动端自适配 力荐viewport缩放解决方案

一、概述：

做了几年的移动端一直用 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缩放解决方案】幸凡学习网