移动奥别产前端开发踩过的坑
2 likes1,618 views
本文讨论了移动奥别产前端开发中的常见问题及解决方案，强调了移动化的趋势以及其对开发的影响。总结了开发过程中遇到的各种产耻驳和调试方法，提出了利用无线局域网和贬罢罢笔代理提高效率的建议。文章还指出，经验积累固然重要，但解决新问题需结合新思路。
![“MOBILE”的读法
英 ['m??ba?l] 美 [?mo?bil]
mobile development - 有道词典](https://image.slidesharecdn.com/web-131217065811-phpapp01/85/Web-6-320.jpg)
移动奥别产前端开发踩过的坑
- 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!