记 移动端页面中莫名其妙的渲染BUG
2016-06-24 10:02
337 查看
问题描述:
在一个很简单的测试页面中
简单的两块布局,上下两块均没有单独设置字体大小,都用body继承的大小,即40px。我们现在给第一个块.fl 加上浮动 float:left;
另外一个块处于正常文档流,不做任何操作。我们会发现,在chrome的手机调试模式下页面的渲染会发生怪异的行为,上下的字体大小居然不一样,而且还很明显。
想了很久完全没有什么头绪,不知道为什么会发生这种行为,于是我就借助chrome的调试发现,上面浮动块的字体大小是正常的40px,
但是下面正常文档流块元素中的字体大小却被渲染成了49.256px。WHY?WHY?WHY?怪不得会产生这样的BUG,不过具体因为什么我是真的不知道,我只知道后面的解决方案是设置viewport
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
加上这个渲染就正常了。看来移动端渲染原理还得加强理解啊。
在一个很简单的测试页面中
简单的两块布局,上下两块均没有单独设置字体大小,都用body继承的大小,即40px。我们现在给第一个块.fl 加上浮动 float:left;
另外一个块处于正常文档流,不做任何操作。我们会发现,在chrome的手机调试模式下页面的渲染会发生怪异的行为,上下的字体大小居然不一样,而且还很明显。
想了很久完全没有什么头绪,不知道为什么会发生这种行为,于是我就借助chrome的调试发现,上面浮动块的字体大小是正常的40px,
但是下面正常文档流块元素中的字体大小却被渲染成了49.256px。WHY?WHY?WHY?怪不得会产生这样的BUG,不过具体因为什么我是真的不知道,我只知道后面的解决方案是设置viewport
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
加上这个渲染就正常了。看来移动端渲染原理还得加强理解啊。
相关文章推荐
- Android Support Library package简介
- android数据存储—SharedPreference
- 关于Xcode8 iOS10下模拟器NSLog不输出的问题
- Android.mk 代码注释
- Swift - 文本标签(UILabel)的用法
- unity学习之NGUI做NPC对话
- Android开源SlidingMenu的使用
- Swift开发 UIColor分类Hex颜色转换
- 去哪儿攻略app v3.9.2 官方iphone版
- Android开发模板------RecyclerView的使用
- unity 文件、图片加载与保存
- Error inflating Edittext错误
- swift修改webview上下滚动出边界的的背景黑色
- java微信开发之上传下载多媒体文件
- Android Studio 多渠道打包改名(超简单版)
- 机票管理系统(Android版)
- android使用webview上传文件(图片)
- Android应用程序添加、删除快捷方式
- Spring与Mybatis整合的MapperScannerConfigurer处理过程
- Android开发基础