移动Web前端开发踩过的坑
•
2 gostaram•1,617 visualizações
本演示为：17173UED学堂（第18期）分享内容的一部分，最新文档请移步： http://kainy.github.io/slides/mobile-web-development-pit.html 。
Recomendados
Mais conteúdo relacionado
Semelhante a 移动Web前端开发踩过的坑
Semelhante a 移动Web前端开发踩过的坑 (20)
Mais de Kainy
移动Web前端开发踩过的坑
- 2. 目录 • 引入：背景介绍 1. 移动化是趋势 2. 对我们的影响 3. “Mobile”的读法 • 第一部分：四类具体的坑 1. 2. 3. 4. 样式 脚本 应用 系统/硬件 • 第二部分：调试方法改进 1. 手机直接访问开发环境 2. 手机通过工作机代理访问内网服务。
- 4. 即将到来的新需求 • 手机客户端（a.17173.com）； • 开发移动版网页（m.17173.com） ； • 移动适配改造。
- 6. “MOBILE”的读法 英 ['məʊbaɪl] 美 [ˈmoˌbil] mobile development - 有道词典
- 7. 第一部分——踩坑流水帐
- 8. CSS新属性 BUG #10169 • 表现：iPad点击补全层后，出 现短暂的残留阴影； • 原因：iPad自带浏览器对被点 击元素做高亮显示； • 修复：可通过设置属性 webkit-tap-highlight-color: rgba(0,0,0,0)避免。
- 9. 自适应布局 VS 固定高度 BUG #10111 • 表现：登录过程中，“高度塌 陷” ； • 原因：需适应不同宽度屏幕， 容器高度不能设为固定值 ； • 解决：js控制，在登录状态切 换前计算将被隐藏元素的高度， 状态切换时赋值給 aitElement/infoElement高度 属性。
- 10. 虚拟键盘上的"新伙伴“ BUG #6764 • 表现：输入用户名不自动补全 邮箱域部分； • 原因：“next”键码不同于普 通键盘的“tab”键码； • 解决：监听blur事件取代 keyup事件+keyCode判断。
- 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倍分辨率图片资源）； 样式中的背景图：媒体查询。
- 15. 小结：对待坑的态度 • 从前：踩坑了，假装没遇到，爬起后继续往前走； • 原因： 挫败感； Bug修复增加“不必要的”代码； • 现在：倾向于先找找绕开的方法，然后做个标记，避免在同样 的坑上栽跟头； • 原因： 正视问题是解决问题的开端； 找出问题关联性，将N个独立问题归纳为一类问题； • 建议：利用 jira.17173.com 的个人空间记录项目中遇到的问题。
- 17. 发生了什么 1. 连入360随身wifi（花名歪蛋蛋） 创建的无线局域网； 2. 手机通过内网ip访问工作机； 3. “开始”后的某一时刻对开发 环境上的网页做修改； 4. 上一步所做的修改 即时 反映 到手机。
- 18. 对应到工作中 场景：开发和调试中，需对代码改动后的效果进行 预览； 问题：非同一网段时，手机无法访问到工作机开发环境； 过去的做法：将网页上传到手机可访问的内网服务器； 不足： 调试需在编辑器和浏览器间频繁切换，增加中间步骤 （文件同步） 影响效率； 5. 新方法：工作机创建无线局域网共享给手机，手机直接访问开 发环境； 6. 好处：跳过文件操作，直接预览修改。 1. 2. 3. 4.
- 19. 更进一步 1. 找到刚才创建的无线连接； 2. 设置http代理，ip：192.168.0.1，端口：17173； 3. 手机浏览器中打开17173首页。
- 20. 发生了什么 1. 手机设置http代理为工作机17173端口（代理服务）； 2. 手机发起的请求交由代理服务器处理； 3. 由代理服务器完成域名查询（domain->host/dns->ip） 及 本次请求的其他步骤，然后再将响应内容返回给请求者。
- 21. 对应到工作中 • • • • • • 场景：部分内网服务需要修改host才能通过域名访问； 问题：绝大部分手机不支持直接修改hosts文件； 过去的做法：通过刷机、越狱手段获取权限后修改hosts； 不足：每台设备都必须进行提权/修改hosts操作； 新方法：通过设置代理让所有设备共用工作机上的hosts文件； 好处： 1. 操作简单，在PC机上修改hosts文件相对方便； 2. 无需重复，只需维护一份hosts文件； 3. 文艺范 —— 做移动端web测试的妹纸再也不必是懂刷机 能越狱的女汉子。
- 22. 小结 1. 把不合理的视为开发流程的一部分，以至于身在坑中却毫 无意识； 2. 实现起来超出预料的麻烦，说明解决方案可能存在不合理； 3. 经验积累重要，但解决新问题也需要引入新思路； 4. 20元的投入可以产生14%的工时回报，绝对是比好买卖。
- 23. Q&A
- 24. THANKS!