移动端H5根据缩放进行适配

之前写了一篇根据rem适配的文章，也是H5适配的一种方式。这次介绍一下通过对页面的缩放进行适配。

每次写博客都很快速草草结束，还请见谅。自从java转到h5后就没怎么写，从现在开始把之前学习的都补上，也是对自己学习到的知识进行一个备份和积累。把这个分享出去和大家一起学习和讨论。

首先不得不说的就是meta标签，一般都会进行设置

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

其中width - viewport的宽度

height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

都说这种简单粗暴，我就更粗暴点直接上代码

    var UA = navigator.userAgent,
        isAndroid = /android|adr/gi.test(UA),
        isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, // 据说某些国产机的UA会同时包含 android iphone 字符
        isMobile = isAndroid || isIos;  // 粗略的判断

            var metaEl = doc.querySelector('meta[name="viewport"]'),
                metaCtt = (metaEl ? metaEl.content : '').replace(/\s*/g, '');

            var kvs = metaCtt.split(','), data = {};
            for (var i = 0; i < kvs.length; i++) {
                var kv = kvs[i].split('=');
                if (/width/.test(kv[0])) {
                    data.width = kv[1];
                }
                data[kv[0]] = kv[1];
            }
            data.width = data.width || 640;

            if (isMobile) { // 定宽
                if (isAndroid) {
                    var medium_dpi = data.width / win.screen.availWidth * window.devicePixelRatio * 160;

                    medium_dpi = medium_dpi.toFixed(2);

                    data['target-densitydpi'] = medium_dpi;
                } else {
                    var scale = win.screen.availWidth / data.width;

                    scale = scale.toFixed(2);

                    data['initial-scale'] = data['maximum-scale'] = data['minimum-scale'] = scale;
                }

                metaEl.content = JSON.stringify(data).replace(/\s*/g, '').replace(/[{}"]/g, '').replace(/:/g, '=');
            }

在页面上直接设置width为最大宽度，我这里设置了750

<meta name="viewport" content="width=750, user-scalable=no">

移动端H5根据缩放进行适配

猜你喜欢