H5常见细节问题

结合工作中代码量的积累以及测试童鞋反馈的优化或bug,记录和总结常见问题:

目前H5常用于微信服务号,支付宝服务窗及手机浏览器,还有直接打包成app的多用途,已经成为目前给用户提供服务的主要形式,一般前端开发人员经过简单培训后大多能上岗做出页面。但为了实现基于产品本质作用,且更完美的还原UI设计图,更清楚的表达PM的意图,那就需要技术的沉淀不可。但前端技术目前万象更新,日新月异,要夯实基础方能应万变,细节决定能走多高能走多远,减少返工率,除去团队成员之间的不必要的沟通。

一、fixed定位的问题

当页面总体布局出现头尾fixed后,输入框获取焦点时,会出现页面排版错乱。

养成一个好的习惯:用absolute代替,最外层放一个全屏盒子,中间可以分成三个absolute的盒子,内容放在中间盒子。如有弹出层,则写在最外层盒子里面。

在需要兼容到IE678的PC页面也可以用这种方式。

二、微信浏览器页面拉到最顶部,或最尾部继续下拉或上拉时,出现默认灰色背景

初始化页面时document.getElementsByTagName('body')[0].addEventListener('touchmove',function(e){e.preventDefault()},false);

去除body的滑动事件。

三、不同分辨率下兼容性问题,一般指兼容IPAD  PHONE

采用rem定位,包括除边框外的px定位全转换成rem。

如UI设计图是750px宽,则将html标签的字体大小设置为屏宽除以7.5;

function setRootFontSize()
{
document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
}
$(window).on('load resize',setRootFontSize);

如此后设计图上的100px宽的图,就是1rem宽。30px的间隔就是0.3rem,类推。

需要设置的是width,height,line-height,padding,margin,font-size,border-radius等

四、为什么边框1px感觉太宽了

所有需要细边框的元素,应该有个边框的class

underline

:after{
position: absolute;
right: 0;
left: 0;bottom: 0px;
height: 1px;
content: ' ';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #b2b2b2;
}

五、CSS向右键头

.icon-arrow:after{
height: 8px;
8px;
border- 1px 1px 0 0;
border-color: #C6C6CB;
margin-top: -5px;
right: 0.36rem;
}

六、浏览器会默认有几个像素的边距,应该初始化*{margin:0;padding:0;}

七、控件注意事项

input   type="tel"调用数字按键

写完要写常用验证,maxlength

//TODO

原文地址:https://www.cnblogs.com/gubook/p/6734270.html