js实现整体缩放页面适配移动端


Posted in Javascript onMarch 31, 2020

大家在适配页面的Web端和移动端时候,如果不需要那么麻烦,就可以使用js进行整体缩放,只需要引入一个js,改动htmll头部代码即可

切记:

1.该 JS 应在 head 中尽可能早的引入,减少重绘。
2.定宽(视窗缩放): 对应 meta 标签写法 ?

750 是效果图内容区域的宽度,一般为 640 或 750

html头部代码:

<meta charset="UTF-8">
<meta name="viewport" content="width=640">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="referrer" content="never">
<title>整体缩放</title>
<script src="__PUBLIC__/js/mobile-util.js"></script>

js源码:

/**
 * 该 JS 中,包含常用的 UA 判断、页面适配、search 参数转 键值对。
 * 该 JS 应在 head 中尽可能早的引入,减少重绘。
 *
 * fixScreen 方法根据两种情况适配,该方法自动执行。
 *  1. 定宽(视窗缩放): 对应 meta 标签写法 -- 
   <meta name="viewport" content="width=750">
   750 是效果图内容区域的宽度,一般为 640 或 750 
 *   该方法会提取 width 值,主动添加 scale 相关属性值。
 *   注意: 如果 meta 标签中指定了 initial-scale, 该方法将不做处理(即不执行)。
 *  
 *  2. REM: 不用写 meta 标签,该方法根据 dpr 自动生成,并在 html 标签中加上 data-dpr 和 font-size 两个属性值。
 *   该方法约束:IOS 系统最大 dpr = 3,其它系统 dpr = 1,页面每 dpr 最大宽度(即页面宽度/dpr) = 750,REM 换算比值为 16。
 *   对应 css 开发,任何弹性尺寸均使用 rem 单位,rem 默认宽度为 视觉稿宽度 / 16;
 *   scss 中 $ppr(pixel per rem) 变量写法 -- $ppr: 750px/16/1rem;
 *   元素尺寸写法 -- html { font-size: $ppr*1rem; } body { width: 750px/$ppr; }。
 */
window.mobileUtil = (function(win, doc) {
 var UA = navigator.userAgent,
 isAndroid = /android|adr/gi.test(UA),
 isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, // 据说某些国产机的UA会同时包含 android iphone 字符
 isMobile = isAndroid || isIos; // 粗略的判断

 return {
 isAndroid: isAndroid,
 isIos: isIos,
 isMobile: isMobile,

  isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA),
 isWeixin: /MicroMessenger/gi.test(UA),
 isQQ: /QQ\/\d/gi.test(UA),
 isYixin: /YiXin/gi.test(UA),
 isWeibo: /Weibo/gi.test(UA),
 isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),

 tapEvent: isMobile ? 'tap' : 'click',

 /**
 * 缩放页面
 */
 fixScreen: function() {
   var metaEl = doc.querySelector('meta[name="viewport"]'),
    metaCtt = metaEl ? metaEl.content : '',
    matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
  matchWidth = metaCtt.match(/width=([^,\s]+)/);

   if ( !metaEl ) { // REM
    var docEl = doc.documentElement,
     maxwidth = docEl.dataset.mw || 750, // 每 dpr 最大页面宽度
     dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
     scale = 1 / dpr,
     tid;

    docEl.removeAttribute('data-mw');
    docEl.dataset.dpr = dpr;
    metaEl = doc.createElement('meta');
    metaEl.name = 'viewport';
    metaEl.content = fillScale(scale);
    docEl.firstElementChild.appendChild(metaEl);

    var refreshRem = function() {
     var width = docEl.getBoundingClientRect().width;
     if (width / dpr > maxwidth) {
      width = maxwidth * dpr;
     }
     var rem = width / 16;
     docEl.style.fontSize = rem + 'px';
    };

    win.addEventListener('resize', function() {
     clearTimeout(tid);
     tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
     if (e.persisted) {
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
     }
    }, false);

    refreshRem();
   } else if ( isMobile && !matchScale && ( matchWidth && matchWidth[1] != 'device-width' ) ) { // 定宽
    var width = parseInt(matchWidth[1]),
     iw = win.innerWidth || width,
     ow = win.outerWidth || iw,
     sw = win.screen.width || iw,
     saw = win.screen.availWidth || iw,
     ih = win.innerHeight || width,
     oh = win.outerHeight || ih,
     ish = win.screen.height || ih,
     sah = win.screen.availHeight || ih,
     w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
     scale = w / width;

    if ( scale < 1 ) {
     metaEl.content = metaCtt + ',' + fillScale(scale);
    }
   }

   function fillScale(scale) {
    return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';
   }
 },

 /**
 * 转href参数成键值对
 * @param href {string} 指定的href,默认为当前页href
 * @returns {object} 键值对
 */
 getSearch: function(href) {
 href = href || win.location.search;
 var data = {},reg = new RegExp( "([^?=&]+)(=([^&]*))?", "g" );
 href && href.replace(reg,function( $0, $1, $2, $3 ){
 data[ $1 ] = $3;
 });
 return data;
 }
 };
})(window, document);

// 默认直接适配页面
mobileUtil.fixScreen();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
layui的table中显示图片方法
Aug 17 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
react国际化化插件react-i18n-auto使用详解
Mar 31 #Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 #Javascript
功能完善的小程序日历组件的实现
Mar 31 #Javascript
小程序双头slider选择器的实现示例
Mar 31 #Javascript
JavaScript实现电灯开关小案例
Mar 30 #Javascript
javascript实现计算器功能
Mar 30 #Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 #Javascript
You might like
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP中的正规表达式(一)
2006/10/09 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python实现的最近最少使用算法
2015/07/10 Python
Python中的id()函数指的什么
2017/10/17 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
python批量修改图片大小的方法
2018/07/24 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python 提取文件指定列的方法示例
2019/08/07 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
策划总监岗位职责
2014/02/16 职场文书
法人代表授权委托书
2014/04/08 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
病危通知书样本
2015/04/17 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
javascript之Object.assign()的痛点分析
2022/03/03 Javascript