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;
width: 8px;
border-width: 1px 1px 0 0;
border-color: #C6C6CB;
margin-top: -5px;
right: 0.36rem;
}

 

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

 

七、控件注意事项

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

写完要写常用验证，maxlength

//TODO