H5开发中的问题总结

最近公司做了一个出行日记的项目,里面的页面十多页,天天加班,做到吐血。总体来说,写页面的时候虽然是十多个页面,其实难度还是在每个页面的特效上。公司是易到用车,出行日记的页面在APP里有生成入口,有兴趣的同学可以去看看。

其实在写页面的过程中,并没有太多项目,可以直接按照设计图给的比例来进行开发,因为我们引用了一个缩放的js,然后分屏使用的是fullpage,因此可以不去考虑尺寸的问题了。页面里面用了大量的css3,主要是用来做一些特效,移动端对css3的属性兼容性基本无差,主要的兼容问题还在android和IOS的渲染模式。

比如说首页有个圆形的用户头像,一开始的实现方法是直接给img,width,height,border,border-radius,这样写在IOS中是没问题的,效果如同我们UED给的设计图H5开发中的问题总结

但是在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,比较灵活,用途很广泛,大家可以自己去挖掘

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

上一篇:移动端H5开发中的常见问题处理


下一篇:springboot深入学习(三)-----docker