今天遇到一个硬茬,我在使用weui重构一个页面时,出现一个问题:路由进入页面时,页面内容尺寸硬是会变大,刷新后又恢复正常:

项目背景:一个使用react-starter-kit构建的B端SPA项目

上图:

出现问题时的情况:

刷新后(它本应该的样子):

折腾了一个下午,各种请教团队里的大神,原因如下:

在我的页面的上一个页面,也就是跳转过来的那个页面,用了这样的自适应方案:rem+计算font-size的function,其中计算在componentDidMount时执行,函数体如下:

function PageInit() {
if (
navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
)
) {
//console.log('-----是否shouji-', $);
var docEl = document.documentElement
const htmlFontsize = docEl.clientWidth * 20 / 375;
if(!htmlFontsize) return;
docEl.style.fontSize = htmlFontsize + 'px';
};
};

看似没问题,实则大问题:

  由于我的尺寸也用rem,那么在上一个页面改变的document的根font-size,会影响到下一个页面的font-size,因为组件未卸载相应的东西或者说CSS有残留,导致我的整体尺寸变化。为什么刷新后恢复正常?那是因为刷新后React会重新构建整个DOM树,因此根font-size是被改变之前的,所以页面尺寸会正常。另外,利用这种自适应方案,页面展示时,首先会是比较小的,然后会有跳一下变大的效果出现,给人一种山寨的感觉,当我的网速差时,页面会卡在componentDidMount里,因此整个页面是小小的一团,什么操作都做不了,什么信息都看不清,用户体验差!

  怪不得要重构呢!

自适应:用JS做的自适应,是最差的自适应,记页面刷新前后尺寸变化的更多相关文章

  1. 70.JS---利用原生js做手机端网页自适应解决方案rem布局

    利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...

  2. Restive.js – 轻松让网站变成响应式和自适应

    Restive.js 是一个 jQuery 插件,可以帮助您轻松快捷地添加响应式功能到你网站,适应几乎所有拥有 Web 功能的设备.使用设备检测,高级管理断点,以及方向管理的组合,Restive.js ...

  3. JS 做时钟

    今天,给大家分享一个用JS做的时钟. <!DOCTYPE html><html> <head> <meta charset="utf-8" ...

  4. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  5. php大力力 [029节] 做PHP项目如何下载js文件:使用腾讯浏览器把网上案例页面存储到本地

    php大力力 [029节] 做PHP项目如何下载js文件:使用腾讯浏览器把网上案例页面存储到本地 yeah,搞定啦 php大力力 [029节] 做PHP项目如何下载js文件:使用腾讯浏览器把网上案例页 ...

  6. socket.io+angular.js+express.js做个聊天应用(三)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27590611 接着前面博客文章socke ...

  7. js做小数运算精度问题

    当js做小数运算时存在bug,大概是因为二进制和十进制转换之间的关系. bug如图 解决方案 1.运算结果后,乘以100再除以100.网上推荐这种方法但是乘以1000再除以1000依然存在精度问题 2 ...

  8. HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图)

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  9. 用 JS 做一个数独游戏(二)

    用 JS 做一个数独游戏(二) 在 上一篇博客 中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...

随机推荐

  1. 【转载】Sqlserver通过维护计划定时自动备份数据库

    Sqlserver数据库的运维过程中,数据库的备份操作至关重要,平时我们都是手动进行数据库的备份操作.如果要做到让数据库定时自动备份,则可以使用Microsoft SQL Server Managem ...

  2. Element-UI 日期范围 date-picke

    实际项目应用案例: <el-form-item label="开始日期:" prop="StartDate"> <el-date-picker ...

  3. linux内核里的字符串转换 ,链表操作常用函数(转)

    1.对双向链表的具体操作如下: list_add ———向链表添加一个条目 list_add_tail ———添加一个条目到链表尾部 __list_del_entry ———从链表中删除相应的条目 l ...

  4. SSM-Netty实现软硬件通信,真实项目案例

    今天分享的是Myself自己工作项目中的一个模块实例实现的思路还有流程,在这过程中也是遇到了很多问题,能过顺利解决也是团队沟通的结果. 项目模拟背景:假设我们有一个软件平台,我们的线下产品是一些探测器 ...

  5. Yii2基本概念之——行为(Behavior)

    使用行为(behavior)可以在不修改现有类的情况下,对类的功能进行扩充.通过将行为绑定到一个类,可以使得类具有行为本身所具有的属性和方法,就好像是类本来就具有的这些属性和功能一样. 好的代码设计, ...

  6. PHP全路径无限分类原理

    全路径无限分类:以一个字段把他所有的父级id按顺序记录下来以此实现的无限分类叫做全路径无限分类 优点:查询方便 缺点:增加,移动分类时数据维护时稍微复杂.

  7. thinkphp模板中,checkbox回显问题

    thinkphp 模板里面可以这样写包含操作 //in 标签 <in name="变量名" value="值1,值2,...">要输出的内容< ...

  8. Spider-two

    一.网络数据加密:1. md5 / sha1 不可逆加密算法: 结果是十六进制数, 结果不可逆, 多用于文件验证 import hashlib md5_obj = hashlib.md5() sha1 ...

  9. Linux PCI设备驱动的实现思路与思想

    概述 1.PCI设备一般都具有双重身份,一方面作为PCI设备注册到Linux内核,另一方面,作为字符设备或者块设备,或者网络设备注册到Linux内核,所以,在看PCI设备时一定要注意到这点. 2. 一 ...

  10. pyinstaller打包错误 UnicodeDecodeError: 'gbk' codec can't decode byte 0xab in position 160:

    注:我的博客原本在CSDN,现转到博客园,图片采用以前的图片,并没有盗图. 在将.py文件打包时,出现了下列错误 >>C:\Users\小呆\PycharmProjects\pycharm ...