H5开发中的问题总结

最近公司做了一个出行日记的项目，里面的页面十多页，天天加班，做到吐血。总体来说，写页面的时候虽然是十多个页面，其实难度还是在每个页面的特效上。公司是易到用车，出行日记的页面在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，比较灵活，用途很广泛，大家可以自己去挖掘

先写这么多，之后再补充~