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 相关文章推荐
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
js登录弹出层特效
Mar 07 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
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
微信支付的开发流程详解
2016/09/13 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
php实现socket推送技术的示例
2017/12/20 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
Python操作MySQL数据库9个实用实例
2015/12/11 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
python中os.remove()用法及注意事项
2021/01/31 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
护士岗位职责
2014/02/16 职场文书
法律专业求职信
2014/05/24 职场文书
整改报告格式
2014/11/06 职场文书
欢迎词怎么写
2015/01/23 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
离婚财产分割协议书
2015/08/11 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python