作为一名移动开发者，见证了公司的移动产品架构，从纯web 网页到native，再到hybrid的过程。hybrid 指app里一部分用native的代码实现，一部分用webview加载web 网页实现。越来越多的公司对移动app采用hybrid的开发模式，一是可以和pc端共享代码，节省资源，二是web部分有更新不用再次发布app就能实现。

对于hybrid app里的web开发，不是简单的把pc端的代码直接拿过来给hybrid app用。PC和mobile的设备有区别，这就需要我们在为二者实现web端时关注的重点不同。以下是我对mobile web开发的一点思考。

1. 界面布局， css设置

mobile设备屏幕较小，这就意味着我们不能用pc端设置界面的思维来设计mobile的界面。mobile屏幕上只能放有限的内容，而且内容大小要易于手指操作，比如点击，滑动等等。如果要适配多种mobile 设备，那就需要界面设计师设计出能在一定范围内动态调整的界面。除此之外，mobile设备可以旋转，对于竖屏和横屏的界面，可能得设计出两套展示方案。

2. 用户操作

pc端的用户操作是通过鼠标完成： 单击， 双击，右键等，对应web的处理事件是pointer event。而mobile的操作是通过手指完成：点击，长按，滑动等，对应的web处理事件是touch event。 这二者之间有可以共用的部分： 比如pc端的单击操作，在mobile端通过手指点击也能触发。 而对于mobile端的滑动手势，需要mobile端去额外处理。
综上所述，mobile web需要处理手势操作。

3. 性能

pc 端和mobile端不同，除了屏幕大小以外， 还包括内存，处理器的区别。在pc端一个应用程序可以占用很多的内存，有的web app甚至能达到1-2G左右的内存。但在mobile端，一个app如果占用1-2G的内存是不可取的，容易导致mobile 设备卡顿，app被系统杀掉等。因此，对于mobile web，需要对性能进行优化，使用懒加载技术，严格限制内存使用，

web app是先请求静态资源比如js， css 文件，然后再执行js代码来加载数据渲染网页。在mobile中， app的启动速度对于用户体验十分重要，hybrid app中的web部分，如果静态资源过大，或导致加载速度过慢。这就需要我们启动的js ， css 文件尽量缩小，加快mobile web的启动速度。即使我们把静态资源绑定在app中发布，也可能遇到服务器升级，而用户未及时升级app的情况。

4. 总结

对于mobile web的开发，我们需要从界面， 用户操作，性能等方面进行考虑。欢迎留言探讨。