APP H5页面显示优化
在开发移动端APP页面时,对各操作系统各种型号的手机进行适配是必须的。然鹅,上周在开发完一个落地页后,被测试给打了回来,其中列出了一个在我看来很小的问题:单击进入页面的时候,页面还没加载完的时候字体显得特别大,整个页面不美观,网速快的时候还好网速慢的时候这种现象可能会停留1s到2s,等页面加载完就恢复正常了。遂仔细查找原因并顺利解决这个问题。
说到移动端字体的适配,那不得不提到px,em,rem这三个单位了。先来回顾一下其基本概念:
px: 绝对长度单位,即你设置了多少就是多少,在各种屏幕大小的设备上显示的大小都是一样的。
em:相对长度单位,相对于其父级元素进行计算而得到的值,在所有现代浏览器中,1em默认的字体大小都是“16px”。例:当父元素的大小为10px,设置子元素0.3em,那么子元素的大小换算成绝对单位就是10*0.3=3px大小了。
rem:相对长度单位,但它是相对于根元素而言的,页面中的根元素指的是html,我们通过设置html的字体大小就可以控制rem的大小。比如,设置html的font-size:20px;子元素btn的font-size:0.6rem,那么换算成绝对单位就是0.6*20=12px大小了
所以在兼容不同屏幕大小设备的时候rem单位是很好的选择,但经检查发现我这个出问题的页面的确用的就是rem相对单位呢,那就是根元素设置的不对,回看js代码,发现是这样动态设置根元素大小的:
<script>
//设置html节点的font-size值
var ua = navigator.userAgent;
if(ua.indexOf('Android 2') > -1){
timmer = setInterval(function(){
var windowWidth = $(window).width();
$("html").css('font-size',windowWidth/6.4 + 'px');
if(windowWidth > 0){
clearInterval(timmer);
}
},100);
}
else {
var windowWidth = $(window).width();
$("html").css('font-size',windowWidth/6.4 + 'px');
}
</script>
也就是说刚加载页面的时候是需要根据当前窗口的屏幕大小计算出并设置根元素的大小,而与此同时页面又开始渲染了,导致这极短的时间里字体的变得特别大,等到页面加载完全又恢复正常了。找出问题的原因所在后,转而采用媒体查询的方式来动态的设置根节点元素大小,顺利地解决了页面刚打开时页面显示不正常的问题。
@media screen and (min-width: 640px) {
html{
font-size:18px;
}
} @media screen and (max-width: 639px) and (min-width: 414px){
html{
font-size:17px;
}
}
@media screen and (max-width: 413px) and (min-width: 321px){
html{
font-size:16px;
}
}
@media screen and (max-width: 320px){
html{
font-size:14px;
}
}
APP H5页面显示优化的更多相关文章
- [原创]浅谈H5页面性能优化方法
[原创]浅谈H5页面性能优化方法 前阶段公司H5页面性能测试,其中测试时也发现了一些性能瓶颈问题,接下来我们在来谈谈H5页面性能优化,仅仅是一些常用H5页面性能优化措施,其实和Web页面性能优化思路大 ...
- App页面显示优化
在开发移动端APP页面时,对各操作系统各种型号的手机进行适配是必须的.然鹅,上周在开发完一个落地页后,被测试给打了回来,其中列出了一个在我看来很小的问题:单击进入页面的时候,页面还没加载完的时候字体显 ...
- 第三方网站返回hybrid app H5页面缓存问题应对策略
最近负责公司各产品线购买模块的开发,各项功能如期开发完成后测试那边反馈回来一个问题:IOS手机在点击支付宝购买后,跳转到支付宝网站时不输入支付密码,直接点返回,返回到我们自己的APP购买界面发现页面显 ...
- H5页面性能优化
对于一个产品,性能在用户体验中是必不可缺的一环.性能优化是个长远的事情,联想到导航项目,列出以下性能优化的方案: 一. 基本的代码层面优化: 1:合理使用css 1)正确使用Display属性 Dis ...
- 手机app/h5页面http请求抓包调试
1.抓包机器跟客户端手机连上同一wifi热点,最好是第三者提供的移动wifi,公司内网wifi网络访问有限制. 2.设置手机客户端http代理 三者关系图示:
- iOS “请在微信客户端打开链接” UIWebview加载H5页面携带session、cookie、User-Agent信息 设置cookie、清除cookie、设置User-Agent
公司新开的一个项目..内容基本上是加载H5页面显示..当时觉得挺简单的..后来发现自己掉坑里了..一些心理历程就不说了..说这个项目主要用到的知识点吧..也是自己踩得坑. 首先说说..这个项目上的内容 ...
- 用weexplus从0到1写一个app(2)-页面跳转和文章列表及文章详情的编写
说明 结束连续几天的加班,最近的项目终于告一段落,今天抽点时间开始继续写我这篇拖了很久的<用weexplus从0到1写一个app>系列文章.写这篇文章的时候,weexplus的作者已经把w ...
- Hybrid App中原生页面 VS H5页面(分享)
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有“混合的” ...
- 客户端相关知识学习(一)之混合开发,为什么要在App中使用H5页面以及应用场景、注意事项
混合开发 随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...
随机推荐
- Android: 在onCreate()中获得对象尺寸
onCreate() 中 View 尚未绘制完成 很多时候,我们需要在某个界面刚刚加载的时候,执行一些对 View 进行操作的代码,通常我们把这些代码放在 Activity 的 onCreate() ...
- mysql一个字符问题
顺便记录一下在使用mysql过程中碰到的一些问题: 有时候使用脚本迁移数据时会碰到乱码的问题,即使将表字符集设置成utf8也无济于事,这个时候在执行sql之前加一句set names utf8即可.
- ASPLOS'17论文导读——SC-DCNN: Highly-Scalable Deep Convolutional Neural Network using Stochastic Computing
今年去参加了ASPLOS 2017大会,这个会议总体来说我感觉偏系统和偏软一点,涉及硬件的相对少一些,对我这个喜欢算法以及硬件架构的菜鸟来说并不算非常契合.中间记录了几篇相对比较有趣的paper,今天 ...
- print、println的区别
System.out.print("a");——后面没有换行符 System.out.println("b");——后面有换行符 换行符:\r和\n以及\r\n ...
- GUC-2 原子性
import java.util.concurrent.atomic.AtomicInteger; /* * 一.i++ 的原子性问题:i++ 的操作实际上分为三个步骤“读-改-写” * int i ...
- git用法大全
转载自实验楼,之前有更新过两篇git的文章,毕竟内容太少,而git还有很多更丰富的技能,在实验楼上有一系列全的教程,这里做一下备案.需要时查阅. Git 实战教程 目录 一.实验说明 二.git的初始 ...
- python lxml教程
目前有很多xml,html文档的parser,如标准库的xml.etree , beautifulsoup , 还有lxml. 都用下来感觉lxml不错,速度也还行,就他了. 围绕三个问题: 问题 ...
- 谨防“USB杀手”
应对来历不明的U盘要小心,因为可能被植入恶意程序或木马,这点相信许多人都知道. 但近两年又出现了一种新的新威胁,下图是一款名为USB Killer的设备,可对电脑硬件造成物理破坏. 它的使用效果很简单 ...
- java console 到文件
System.setOut(new PrintStream(new FileOutputStream("c:\\temp\\test1.txt"))); System.out.pr ...
- elasticsearch中ik词库配置远程热加载
1. 修改 IKAnalyzer.cfg.xml 配置文件中的<entry key="remote_ext_dict">http://127.0.0.1/xxx.txt ...