viewport缩放方法，解决移动端自适配

用户9914333

发布于 2022-07-21 20:12:32

1.1K0

发布于 2022-07-21 20:12:32

文章被收录于专栏：bug收集bug收集

一、概述：

做了几年的移动端一直用 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, user-scalable=0">

注：maximum-scale，minximum-scale，user-scalable=no 属性的设置，可能会限制缩放效果

总结：

使用缩放 viewport 来做移动端适配确实简单，但在缩放时，有人反应页面会出现糊的情况。是否采用，自行权衡

< END >

本文参与?腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-10-19，如有侵权请联系?cloudcommunity@tencent.com 删除

网站

本文分享自 bug收集微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！

网站

登录后参与评论

0 条评论

热度