More Related Content
Similar to 移动Web前端开发踩过的坑 (20)
移动Web前端开发踩过的坑
- 2. 目录
• 引入:背景介绍
1. 移动化是趋势
2. 对我们的影响
3. “Mobile”的读法
• 第一部分:四类具体的坑
1.
2.
3.
4.
样式
脚本
应用
系统/硬件
• 第二部分:调试方法改进
1. 手机直接访问开发环境
2. 手机通过工作机代理访问内网服务。
- 8. CSS新属性 BUG #10169
• 表现:iPad点击补全层后,出
现短暂的残留阴影;
• 原因:iPad自带浏览器对被点
击元素做高亮显示;
• 修复:可通过设置属性 webkit-tap-highlight-color:
rgba(0,0,0,0)避免。
- 9. 自适应布局 VS 固定高度 BUG #10111
• 表现:登录过程中,“高度塌
陷” ;
• 原因:需适应不同宽度屏幕,
容器高度不能设为固定值 ;
• 解决:js控制,在登录状态切
换前计算将被隐藏元素的高度,
状态切换时赋值給
aitElement/infoElement高度
属性。
- 11. (UI)WEBVIEW != BROWSER BUG #7291
• 表现:三星、HTC x920e
(android4.1.1)安装测试
app,只能点开一次注册服务
条款,关闭后无法再点开;
• 原因:app中调用
window.open 只能打开一次同
名窗口;
• 解决:name属性使用变量值
(如:时间戳);
• 类似:横竖屏切换表单数据丢
失Bug #6964。
- 12. 当心EMAIL TEL…格式字符串 BUG #10205
• 表现:点击email格式的字符
串跳转到 mailto: 协议地址;
• 原因:应用自动将格式匹配的
字符串转换为链接 ;
• 解决:
破坏格式(如使用span
标签包裹“@”符号);
通过设置meta 标签禁用
格式转换。
- 13. 厂商定制行为 BUG #6810
• 表现:input自动添加占位符,
内容与label元素一致;
• 原因:三星GT-I9308 自带浏
览器定制的行为;
• 解决:使用placeholder属性
描述输入内容,取代label。
- 14. RETINA屏图标显示模糊 BUG #7282
• 表现:普通屏幕显示正常的图标,在Retina屏下显示模糊;
• 原因:设备像素比高,需要更高分辨率的图片资源;
• 解决:
img标签:通过devicePixelRatio属性判断是否高清屏,是则
设置宽高、修改src属性(引用2倍分辨率图片资源);
样式中的背景图:媒体查询。