解决手淘lib-flexible.js在移动端首次加载页面页面先放大后正常问题

例如这样

然后这样

出现这样的原因一般是   静态的,即html里有一些静态的(即非js动态添加的)

如果在页面加载完成后,页面是用js动态添加的,这个问题就不太明显,

doc.addEventListener(‘DOMContentLoaded‘, function(e) {
            doc.body.style.fontSize = 12 * dpr + ‘px‘;
        }, false);

这段代码是起主要作用的,但是这段代码是在页面初始化完毕才执行的(即把把其他引用的js文件下载好,并且里面的函数都初始完成),

这样,在页面加载的一瞬间,我们会看到页面先先放大的,不解释了,太晚了,直接说解决方案把。

refreshRem();
    //doc.body.style.fontSize = 12 * dpr + ‘px‘;
    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;

1.在  refreshRem();后面加上doc.body.style.fontSize = 12 * dpr + ‘px‘;这段代码,

2.

<body>
<script type="text/javascript" src="js/lib/flexible_css.js" ></script>
  <script type="text/javascript" src="js/lib/flexible.js" ></script>

把这两个js放在body的头部(),一定要放在这里,

不然 doc.body.style.fontSize = 12 * dpr + ‘px‘;  我们加的这段代码会报错,原因是可能是页面还没有body元素


最后ps一句:这个方案的原理就是在body刚加载完就计算fontsize,这样修改的会不会对其他方面就影响我还不太清楚,请懂得同学,告诉一下,谢谢
时间: 2025-01-31 08:42:45

解决手淘lib-flexible.js在移动端首次加载页面页面先放大后正常问题的相关文章

js引入php 用来加载静态页面 输出到页面中

HTML页面中加入代码 <script type="text/javascript" src="http://www.域名.com/js.php?id=tjyd"></script> js.php代码: <?php //js加载静态页面 输出到页面中 $id = trim($_GET['id']); $file = 'iframe/'.$id.'.html'; if(file_exists($file)){ //echo '22'; $

手机端和PC端分别加载不同的js文件

分手机端和PC端其实方法很多,我们在响应式设计.响应式网站建设中经常碰到此类需求.下面说说我们在项目中遇到的需求: 手机端和PC端分别加载不同的js客服代码(注意:是要在PC和手机端分别加载不同的js文件) 第一种方法(简单型): <script type="text/javascript"> // 根据屏幕尺寸 if (screen && screen.width > 480) { document.write('<script type=&q

Ajax中主页加载分页面后,分页面js脚本不执行的解决办法

没看懂,稍后再看 Ajax中主页加载分页面后,分页面js脚本不执行的解决办法 最近捣鼓JQuery,其中强大的Ajax系列函数令人印象深刻,所以做项目时毫不犹豫地采用了一下该技术,在主页中动态加载分页面进来,咋看效果 不错,都能实现了第一层次的加载,但深入下去问题就出来了:动态加载进来的页面中外联了js文件,其中的脚本却没有在加载后运行! (脚本在单独浏览该分页面时运行是正常的) 我郁闷了,打开Firefox中的Firebug查看了加载后的主页面中的DOM,所有元素的加载都是正常的啊~ 自己改来

jQuery手机端上拉刷新下拉加载更多页面

<!doctype html> <html> <head> <title>jquery 手机端上拉刷新下拉加载更多页面</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewpost" content="width=device-wi

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了,导致出错.后来使用此法,保证了任何时候都完全是按照js的先后顺序执行的. 源码: /** * js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 * 原理:利用 ajax 异步多线程快速加载, 每个文件加载完成后存入到加载完成数组中, * 显示到页面时完全按传入的顺

C#开发中碰到的问题------easyUI 框架下dialog加载HTML页面不执行js问题

问题描述: easyUI 框架下,使用easyUI dialog加载HTML页面,HTML页面写在头部的js不会执行 解决办法: 将js写在body里 问题原因: 转[https://www.cnblogs.com/summer_adai/p/3548252.html] 原文地址:https://www.cnblogs.com/LiCoco/p/9117103.html

javascript实现js脚本的的异步加载

javascript实现js脚本的的异步加载,和图片的异步加载稍有不同,script的异步加载需要借助dom,因此有了局限性 <html> <head> <meta charset="utf-8" /> <title>Javascript</title> <meta http-equiv="X-UA-Compatible" content="IE=7"> </head&

解决父类加载iframe,src参数过大导致加载失败

<iframe src="*******.do?param=****" id="leftFrame" name="leftFrame" frameborder="0"></iframe> 或者是使用js加载src: var params = "?pk_id="+pk_id; var frameLeftSrc = "<%=path %>/****/****.do&

Js外部资源按需加载

内容来源:http://hi.baidu.com/begin/item/df02bd79ca8cc0710d0a078a 按需加载js的研究和实现 加载js的基本原理,就是在DOM里面加载<script>元素,加载这些元素都是异步的过程.所以可以说是无阻塞的加载.但是如果脚本之间存在依赖的话,就会出现不可预知的错误.根据这个,在加载脚本的时候,需要监听"load"事件,对于IE的特殊性,需要监听"readystatechange"事件.基于这些,实现两个