关于你有一条未读短信的静态单页

最近一直没有时间写博客，忙自己的人生大事，没有经历过，说实在的事情太多太多，不提前准备真心不行，还好各种事情准备就绪，安心上班，等待时间慢慢逼近。

在最近利用晚睡前的时间做了一个小的静态页面，放在sae上的，没去github pages的原因是我还想写点儿PHP在里面。

有图逼格依旧不行啊，只是一个简单的模拟的iphone的短信界面

之前是搜了一下相应的效果，看了看也有很不错的，我还是想自己瞎写，于是找了个iPhone，手机截屏了一个短信界面。肯定不是直接用图片了，容我上代码

html

<div>我是iphone短信</div>

css

div {             position: relative;             display: inline-block;             margin: 20px 10px auto 10px;             padding: 10px 8px;             max-width: 60%;             border-radius: 15px;             background: #e6e5ea;             color: #07070b;             text-align: left;         }         div:before, div:after {             content: '';             position: absolute;             bottom: 0;             display: block;             width: 15px;             height: 15px;         }         div:before {             left: -7px;             border-bottom-right-radius: 15px;             background: #e6e5ea;         }         div:after {             left: -15px;             border-bottom-right-radius: 7px 15px;             background: #fff;         }

没有后台数据支持，只是为用户显示固定好的信息，模拟数据中一个question，一个answer，用户只是需要点击“发送”就可以了。

第一次加载时自动接收一条来自我的信息，下一个question添加在下面的模拟文本框中，左侧点击直接给我手机发送短信。点击发送发出question，延迟1s收到answer，将下一次的question又自动添加到模拟文本框中，如此反复。

添加audio，收到回复消息play(),此处需要记住的是移动端的audio.play()存在不自动播放的问题，查询ios上说的是需要手动触发才能播放，Android也会出现同样的不自动播放的问题，测试UC浏览器可以自动播放。其他的需要点击发送后才能触发。

消息满屏后自动向上滚动，使用的transform的translate3d，这个有遇见几个问题

移动浏览器中需要添加浏览器前缀，否者不能有顺畅移动效果。

移动后会增加外层容器的高度，出现空白。这个暂时都没能很好的解决。

最近看见一篇文章说的是css动画性能还要好一些，具体的也没细看文章，找时间再详细看一些再实际应用。

最后信息发送完以后，会弹出一个对话框，对话框的内容是分享到QQ空间，本来想使用微信API的，没备案，放弃了。就只是使用了qzone share，本来的想法是获取用户的QQ信息，但是实际的数据基本都是空白，因为大部分朋友都是使用的qzone的客户端访问进来的，没有http_referer信息，也就失败了。没有更好的办法，看来不能随意获取用户啊。

只是收到了用户的一条短信，结局是失败的，用户体验中现实与理论不一致

好了，周末了，去海底捞吃一顿（一年就此一次啊！）