网页前端设计

http://www.86y.org

搜索文章

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

用声音读出全文关注我吧
 2018/7/6 9:39:54 阅读次数:366

一、概述:

做了几年的移动端一直用rem,感觉最烦琐的就是rem的计算。随便可以用cssrem自动计算,但是有时候感觉宽度跟高度的rem并不是完全准确。所以决定用viewport缩放来试试看效果,经果一些网友的帮忙测试,发现缩放viewport这种方法更简单、高效、准确。

测试结果:(如果其它手机测试结果欢迎留言)测试地址:http://86y.org/demo/scale/
360n6pro 正常
oppo r7s 正常
坚果Pro 正常
iphone6 正常
iphone8p 正常
华为p9 正常

二、思路:

例如效果图是:750*1334(px)的源文件。

1、根据750 PSD源图 宽度尺寸进行比例缩放,高度并没有限止,所以高度是自由的

2、缩放viewport的同时,宽度跟高度是等比的,所以敢说这种方式比rem更准确。

三、js核心代码:

代码说明:切图时只需要按照PSD尺寸大小设置px即可,无需复杂的rem计算

(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);

四、结语:

对于移动端自适应这个话题,有很多种方法,但是我觉得最好用的应该还是缩放viewport。希望能帮助到大家!


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=862【移动端自适配 力荐viewport缩放解决方案】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭