移动端web前端开发入门。

Question

题主有一些pc端web前端开发的经验，但移动端web前端了解较少且没有实践过。

想了解一些移动端web前端开发的经验。

尤其是关于响应式布局和性能问题。 　　

• 有哪些需要注意的问题？
• 有哪些好的框架推荐？
• 与设计团队，产品团队，后端开发团队的对接方面有什么需要注意的？

忘记提很重要的一点：Hybrid App 和 移动版网站会有需要分别注意什么？

Answer 1

这里推荐一些关于移动端开发的博文：

1、手机/移动前端开发需要注意的20个要点
2、移动端如何开始
3、移动web页面前端开发总结
4、大漠的移动端重构，从深入浅

希望对需要了解或者准备开发手机端页面的朋友有所帮助

Answer 2

面对这些问题，一开始我们只能在未知中试错，知道错误的方案才能更容易寻找正确的解决问题思路，2年多来，可看到移动web在业界不断趋向于成熟，各种框架和解决方案不断的涌现让移动端开发不再是个噩梦。
meta基础知识
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
忽略将页面中的数字识别为电话号码
忽略Android平台中对邮箱地址的识别
当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari (new)
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
viewport模板 (new)
常见问题
移动端如何定义字体font-family
移动端字体单位font-size选择px还是rem (new)
移动端touch事件(区分webkit 和 winphone) (new)
移动端click屏幕产生200-300 ms的延迟响应
触摸事件的响应顺序
什么是Retina 显示屏，带来了什么问题
ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
部分android系统中元素被点击时产生的边框怎么去掉
winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
webkit表单元素的默认外观怎么重置 (new)
webkit表单输入框placeholder的颜色值能改变么
webkit表单输入框placeholder的文字能换行么
IE10（winphone8）表单元素默认外观如何重置
禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
禁止ios和android用户选中文字
打电话发短信写邮件怎么实现
模拟按钮hover效果 (new)
屏幕旋转的事件和样式
audio元素和video元素在ios和andriod中无法自动播放
摇一摇功能 (new)
手机拍照和上传图片
微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整
消除transition闪屏
开启硬件加速
取消input在ios下，输入的时候英文首字母的默认大写
android上去掉语音输入按钮
android 2.3 bug
android 4.x bug
设计高性能CSS3动画的几个要素
fixed bug
如何阻止windows Phone的默认触摸事件
播放视频不全屏 (new)
常用的移动端框架
zepto.js
iscroll.js
underscore.js
滑屏框架
flex布局 (new)
FastClick
Sea.js

Answer 3

Hybrid App
js方面:zepto.js jquery-mobile
CSS方面:jquery-mobile boostrap

hybrid app其实就是在写网页，不过最后用cordva进行封装
不过性能方面还是没有单纯的安卓应用好。
一般现在市场上的应用都是在安卓里调用H5+JS这样。

项目DEMO你可以参考下：https://github.com/sheilaCat/smartGuard
因为这个是正在做的项目，所以只公开了刚开始构建的时候的一点静态页面。可作为入门参考。

这里是一个完整的DEMO：https://github.com/sheilaCat/campus
求星星~~用jquery-mobile构建的前端页面，后来用phonegap封装了一下。
不过目前只上传了完整的前端静态页面……采纳我，我上传完整版本。

请采纳~

Answer 4

Hybrid App其实就是在做网页，只是本地的功能是通过JS调用，所有出错调试比较麻烦，移动网站开发，看你兼容哪些设备，是否需要响应式布局，ios的的浏览器兼容性就不用说了。主要是android的浏览器兼容，国内主流的那几个主流浏览器做好测试就行。

Answer 5

说说webApp开发的注意事项：
1、流量
2、首屏加载时间
3、电池