《七夕情书项目》

  上一周在做情人节书信项目，整个项目的流程是有一个装有信件的信封缓缓打开，然后信件上升，信里面的内容是可以自己编写的，然后转发给你想要转发的人，图一所示。

       这个项目中遇到了不少问题：

       1.设计图适配iphone和安卓各种机型 

       2.信封翻转动画安卓机显示不了

       3.转发的时候如何将你写的信件内容传给下个人

因为公司平台做的轻app都是基于微信平台的，所以很多开发都要与微信相关，获取微信名，微信转发等。第一个问题，做轻app项目，做屏幕适配一直是一个很头疼的问题，一开始写了几套样式表，然后通过媒体查询的方式调用不同的样式表，后来临上线了发现这样做很多安卓机根本不适配，简直急死，后来问了比较资深的同事，他们一般会用一个js文件去检测手机的尺寸，然后设定一个比例，你的css在设定宽高的时候就可以按照px去写了，不过这个方法有个弊端就是，iphone4不能适配，所以，还需要给iphone4单独写一套样式，可能这并不是最好的解决方案，但是这个项目先用的这个方法，以后总结出更优的解决方案，也要记录下来。

//手机屏幕适配
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;

if (/Android (\d+\.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);

// andriod 2.3
if(version>2.3){
document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
// andriod 2.3以上
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
// 其他系统
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}

//iphone4适配
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2) {
       .register_wrap{
                 width: 640px;
                 height: 100%;
                            }
                }

第二个问题，信封翻转动画，我用的是css3的rotateX3D翻转属性，从rotateX(0deg)翻转到rotateX(180deg);就是这样一个信封翻转打开盖子，但是这个动画放到安卓机下面并不能翻转，理论上说安卓机也是支持css3的rotateX属性的，后来找到了原因，是因为我写的结构有问题，因为信封的上半部分和下半部分我都是没有写div结构的，只是在css中用.mailer:before和.mailer:after两个样式去加载信封的上下两个背景图片，然而这两个背景图片并没有div结构的，所以在苹果机下上面的信封可以有揭开的动画，而在安卓机下不能显示。

第三个问题，其实主要是后台的操作，前端的话只需在微信转发的时候链接加上一个letterId，也就是在后台数据库会有一个字段记录你这封信件的id，当下一个人接受这封信的时候根据这封信的letterld去查询出信件内容。

图一

图二

小游戏的最后成品

最后还是祝大家七夕快乐啦~貌似有点晚╭(╯^╰)╮，没关系的单身狗不在意的，哈哈哈~