之前写了一篇根据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">