最近完成的一个项目感想

页面分类。

pc端页面 app端h5页面 m站页面

1. PC用户：使用pc端页面，跟平时开发无异
2. pad app用户：app内嵌页面，使用pc端页面，调用app组件，native方法；使用pc页面时需要满足适配要求。
3. pad 浏览器用户：pc端页面，但无法使用app组件，native方法
4. mobile app用户：使用apph5页面，调用app组件和native方法
5. mobile 浏览器用户：使用 m站页面.

移动端需要考虑的点

前提：使用百分比实现，间距使用px单位

1. 移动端需要适配不同机型，在不同的宽高尺寸中可能需要不同的调整，比如一个满屏背景需求(由于内容固定，在iphone5以上的尺寸比较大的机型中可以使用，但在iphone4中由于高度不够内容溢出满屏并不适用)，今天看同事代码 发现可以用min-height:100%来处理这个问题，既能在大尺寸的手机里满屏，也能在小尺寸的手机里包住容器，比直接height：100%好用多了！！！！！
2. 在得到设计图后先了解层次关系，再模拟想好再不同设备的适配关系，然后在进行下手编码，不然在后期实体机测试的时候可能会出现很多不必要的麻烦。
3. 移动设备最大宽度为640px，在pc上为了更好显示移动页面时可以做个媒体查询限制下宽度，虽然页面不会投在pc端，但是可以在平时开发时候好看点
4. 在移动端时需要考虑retina屏问题，一个无线开发的同学告诉我，现在基本没有dpr为1的也少为3的，所以他在平时在发的时候直接使用2x图片。当然现在有个比较好用的css属性直接设置不同的屏不的图，image-set，当然还可以用媒体查询以及js判断
5. 移动端都是用touch事件来替代mouse事件，pc端的组件跟移动端的组件是分开的，移动端的组件更多是native结合，比如跳转的功能(pc端可以使用cookie携带用户登录的信息，移动端可能需要另外的方式去实现)
6. 能用lazyload的地方一定用lazyload，这是提升页面性能很好的方法，icon之类的可以用雪碧图，某些固定的小图片可以用base64内嵌在css里可以减少请求（当然尺寸可能会变大）
7. 本次需求中有分享到facebook ok vk等社交网站的功能，由于碰到很多坑，所以以后开发时需要注意：不同社交网站图片尺寸问题，facebook敏感图片过滤问题，图片地址暂时无法访问问题，以及如何提供页面供facebook抓取问题
8. 适时适当的使用预加载、动画等效果来改善体验的同时来优化页面下载效率