最近公司做了一个出行日记的项目，里面的页面十多页，天天加班，做到吐血。总体来说，写页面的时候虽然是十多个页面，其实难度还是在每个页面的特效上。公司是易到用车，出行日记的页面在APP里有生成入口，有兴趣的同学可以去看看。
其实在写页面的过程中，并没有太多项目，可以直接按照设计图给的比例来进行开发，因为我们引用了一个缩放的js,然后分屏使用的是fullpage，因此可以不去考虑尺寸的问题了。页面里面用了大量的css3,主要是用来做一些特效，移动端对css3的属性兼容性基本无差，主要的兼容问题还在android和IOS的渲染模式。
比如说首页有个圆形的用户头像，一开始的实现方法是直接给img,width,height,border,border-radius,这样写在IOS中是没问题的，效果如同我们UED给的设计图
但是在android中就不行了，外面的边框仍然是圆的，但是里面的图片却是一个矩形。之后改成了在img外面套一个div，然后把width,height,border,border-radius给了外面的这个父容器，然后里面的头像图片样式改成height:100%;width:100%;border-radius: 50%,android和IOS就都乖乖好了，但是为什么在android中会出现这个问题到现在我也还没明白==、
2.去掉电话号码的默认样式
h5开发中，如果页面中包含电话号码，电话号码会被自动赋予样式，颜色变成蓝色还是紫色什么的。。。这个时候在head里面加一个
<meta name="format-detection" content="telephone=no"> <!--自动检测在网页中可能出现的电话号码-->
就药到病除了撒~
3.判断当前为微信环境
通过userAgent来判断,使用了jQuery
<script>
$(function(){
var ua = navigator.userAgent.toLowerCase();
var u = navigator.userAgent;
var matchmicro = ua.match('micromessenger');//如果符合返回micromessenger,如果不符合则返回null
var matchandroid = u.indexOf('Android') > -1;//判断终端为android
var matchios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);//判断终端为ios
if(matchandroid || matchios ){
//function(){}
}else if( matchmicro[0] == 'micromessenger' ){//判断终端为微信
//function() {}
}else {
return false;
} });
</script>
4.判断屏幕当前是否为竖屏，横屏提醒旋转
function orientationChange() {
//当页面的宽大于高时提示
if(screen.width > screen.height) {
alert("为保证最佳品质的呈现，请保持竖屏浏览哦~");
}
//下方是不同旋转角度，可不用
/*switch (window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
}
;*/
}
// 添加事件监听
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
由于页面在横屏下显示效果有些欠缺，故有此需求；但实际上通过在head中设置meta标签
<meta name="screen-orientation" content="portrait" />
可以达到强制竖屏，无法旋转屏幕的效果
5.css3中的calc
这个属性也是在看鹅厂的一个充费页面的时候看到的，一开始还以为是用了less,sass之类，一查才知道原来是css3的新属性，顿感自己知道的太少了，详细的介绍可以戳
http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html 我在这里不做扩展说明，简单来说可以进行运算，比如说我们想让一个元素宽度横霸全屏，但是两边需要有个间距居中，大部分时候我们要设置个margin、padding之类的，用这个就可以轻松达到了width:calc(100% - 70px);这只是一个小例子，更多的应用大家可以自己发现；另外使用的时候记得加浏览器厂商前缀，为了考虑兼容性可以设置一个width作为默认值。
6.电话可拨打，邮件可发送
<a href="tel:110">点击打电话</a>
<a href="mailto:110@qq.com">点击发邮件</a>
7.模拟a标签的hover效果，使用了zepto
<script>
$(function(){
var links = $('a');
for(var i = 0;i < links.length;i++) {
links[i].addEventListener('touchstart',function(){this.addClass('hover');},false);
links[i].addEventListener('touchend',function(){this.removeClass('hover');},false);
}
});
</script>
亲测有效，主要是用了touchstart事件,然后为元素添加class，比较灵活，用途很广泛，大家可以自己去挖掘
先写这么多，之后再补充~