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混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...
随机推荐
- Python+Selenium 自动化实现实例-实现文件下载
#coding=utf-8 from selenium import webdriver #实例化一个火狐配置文件 fp = webdriver.FirefoxProfile() #设置各项参数,参数 ...
- python基础(9)--递归、二叉算法、多维数组、正则表达式
1.递归 在函数内部,可以调其他函数,如果一个函数在内部调用它本身,这个函数就是递归函数.递归算法对解决一大类问题是十分有效的,它往往使算法的描述简洁而且易于裂解 递归算法解决问题的特点: 1)递归是 ...
- [MySQL]You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column
执行update语句,出现问题: 问题描述: You are using safe update mode and you tried to update a table without a WHER ...
- 号外,号外 -几乎所有的binary search和mergesort都有错
号外,号外 -几乎所有的binary search和mergesort都有错 这是Joshua Bloch(Effective Java的作者)在google blog上发的帖子.在说这个帖子之前,不 ...
- Java学习(if wihle switch for语句)
一.if语句 定义:if语句是指如果满足某种条件,就进行某种处理. 语句: if (条件语句){ 执行语句; …… } 上述格式中,判断条件是一个布尔值,当判断条件为true时,{}中的执行语句才会执 ...
- Javascript、C#、php、asp、python 等语言的链式操作的实现
一.什么是链式操作 把需要的下一步操作的对象通过上一步操作返回回来.使完成某些功能具有持续性. 二.链式操作优点 代码更精简优雅.链式操作能大大精简代码量,多项操作一行代码一气呵成,搞定: 链式操作应 ...
- mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...
- 【原创】Scrapyd 的 .net 客户端
最近项目需要部署Scrapy爬虫,采用最简单的Scrapyd服务进行部署,基于.net core 进行了客户端的封装. 1)Scrapyd API文档:http://scrapyd.readthedo ...
- JS 判断浏览器类型,获取位置信息,让手机震动
判断是否是安卓 var isAndroid = /Android/i.test(navigator.userAgent); 判断是否是IOS系统 var isIOS = /iPhone|iPad|iP ...
- 服务管理(svcadm)
svcs 正在运行的服务 svcs -a 正在运行和没运行的服务 svcs -D 此进程依赖的进程 svcs -D sendmail svcs -d 依赖于此进程的进程 svcs - ...