doubleyong
管理员
管理员
  • 最后登录2020-12-03
  • 发帖数938
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:221回复:0

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

楼主#
更多 发布于:2020-10-20 10:27
一、概述:

做了几年的移动端一直用 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 幸凡学习网
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号