大家在适配页面的Web端和移动端时候,如果不需要那么麻烦,就可以使用js进行整体缩放,只需要引入一个js,改动htmll头部代码即可
<>强切记:
1。该JS应在头中尽可能早的引入,减少重绘。
2 .定宽(视窗缩放):对应元标签写法——
750是效果图内容区域的宽度,一般为640年或750年
<强> html头部代码:
& lt;元charset=皍tf - 8”比;
& lt; meta name=" viewport "内容=翱矶?640”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,user-scalable=不,初始=1.0,最大范围=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘,chrome=1”比;
& lt;元name=颁秩尽蹦谌?皐ebkit”比;
& lt;元name=皉eferrer”内容=按硬弧北?
& lt; title>整体缩放& lt;/title>
& lt;脚本src=" https://www.yisu.com/zixun/__PUBLIC__/js/mobile-util.js "祝辞& lt;/script>
<强> js源码:
/* *
*该JS中,包含常用的UA判断,页面适配,搜索参数转键值对。
*该JS应在头中尽可能早的引入,减少重绘。
*
* fixScreen方法根据两种情况适配,该方法自动执行。
* 1。定宽(视窗缩放):对应元标签写法—
& lt; meta name=" viewport "内容=翱矶?750”比;
750年是效果图内容区域的宽度,一般为640或750
*该方法会提取宽度值,主动添加规模相关属性值。
*注意:如果元标签中指定了初始,该方法将不做处理(即不执行)。
*
* 2。雷:不用写元标签,该方法根据dpr自动生成,并在html标签中加上data-dpr和字体大小两个属性值。
*该方法约束:IOS系统最大dpr=3,其它系统dpr=1页面每dpr最大宽度(即页面宽度/dpr)=750, REM换算比值为16。
*对应的css开发,任何弹性尺寸均使用快速眼动单位,rem默认宽度为视觉稿宽度/16;
* scss中美元ppr(像素/rem)变量写法——ppr美元:750 px/16/1rem;
*元素尺寸写法——html{字体大小:ppr * 1美元快速眼动;}{身体宽度:750 px/ppr美元;}。
*/窗口。mobileUtil=(函数(赢,doc) {
var UA=navigator.userAgent,
isAndroid=/android | adr/gi.test (UA),
isIos=ipod/iphone | | ipad/gi.test (UA),,! isAndroid,//据说某些国产机的UA会同时包含iphone android字符
isMobile=isAndroid | | isIos;//粗略的判断
返回{
isAndroid: isAndroid,
isIos: isIos,
isMobile: isMobile,
isNewsApp:/NewsApp \ [\ d \] +/gi.test (UA),
isWeixin:/MicroMessenger/gi.test (UA),
isQQ:/QQ \/\ d/gi.test (UA),
isYixin:/鑫/gi.test (UA),
isWeibo:/微博/gi.test (UA),
isTXWeibo:/T (& # 63;: X | encent)微博/gi.test (UA),
tapEvent: isMobile & # 63;“龙头”:“点击”,/* *
*缩放页面
*/fixScreen:函数(){
var metaEl=doc.querySelector(“元[name="视窗"]”),
metaCtt=metaEl & # 63;metaEl。内容:”,
matchScale=metaCtt.match(/初始\剂量=((\ d \] +)/),
matchWidth=metaCtt.match(/宽度=([^ \ s] +)/);
如果(! metaEl){//快速眼动
var docEl=doc.documentElement,
maxwidth=docEl.dataset。//每兆瓦| | 750年,dpr最大页面宽度
dpr=isIos & # 63;Math.min (win.devicePixelRatio, 3): 1、=1/dpr规模,
tid;
docEl.removeAttribute (“data-mw”);
docEl.dataset。dpr=dpr;
metaEl=doc.createElement(元);
metaEl.name=笆哟啊?
metaEl。内容=fillScale(规模);
docEl.firstElementChild.appendChild (metaEl);
var refreshRem=function () {
var=docEl.getBoundingClientRect宽度().width;
如果(宽/dpr祝辞maxwidth) {
宽度=maxwidth * dpr;
}
var rem=宽/16;
docEl.style。字形大?rem +“px”;
};
赢了。addEventListener(“调整”,函数(){
clearTimeout (tid);
tid=setTimeout (refreshRem, 300);
},假);
赢了。addEventListener (pageshow,函数(e) {
如果(e.persisted) {
clearTimeout (tid);
tid=setTimeout (refreshRem, 300);
}
},假);
refreshRem ();
}else if (isMobile,,matchScale !,,(matchWidth,,matchWidth[1] !=设备宽度)){//定宽
var宽度=方法(matchWidth [1]),
iw=赢。innerWidth | |宽度,
噢=赢。outerWidth | |信息战,
sw=win.screen。宽度| |信息战,
看到=win.screen。availWidth | |信息战,
ih=赢。innerHeight | |宽度,
哦=赢。outerHeight | | ih,
伊什=win.screen。高度| | ih,
sah=win.screen。availHeight | | ih,
w=Math.min (ih iw,喔,西南,看到,哦,伊什,sah),
规模=w/宽度;
如果(规模& lt;1){
metaEl。内容=metaCtt +”、“+ fillScale(规模);
}
}
函数fillScale(规模){
规模回报'初始=' + +”,最大范围=肮婺? +”,最小规模=' +规模+”,user-scalable=没有';
}
}，/* *
*转href参数成键值对
* @param href{字符串}指定的href,默认为当前页href
* @returns}{对象键值对
*/getSearch:函数(href) {
href=https://www.yisu.com/zixun/href | | win.location.search;
var data={}, reg=新的正则表达式("([^ & # 63;=,]+)(=((^和)*)& # 63;”、“g”);
href和,href。替换(reg,函数($ 0 $ 1、$ 2 $ 3){
数据(1美元)=3美元;
});
返回数据;
}
};
})(窗口、文档);//默认直接适配页面
