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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 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
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
Python写的服务监控程序实例
2015/01/31 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
Python通过len函数返回对象长度
2020/10/22 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
实习医生自我评价
2013/09/22 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
地震捐款倡议书
2014/08/29 职场文书
2014年度工作总结报告
2014/12/15 职场文书
采购员岗位职责
2015/02/03 职场文书
个人年终总结范文
2015/03/09 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技