总结XX网app中webapp常见的前端错误。

标签：地方   idt   fonts   超出   目标   res   cal   win   时间   

在2016年12月至2017年1月，这一个月的时间内，我参与了易政网app中webapp前端项目的工作，下面将我在此次项目中犯的错误总结起来，以防下次再犯。

注意点

一：复用

可复用的地方一定要复用，不然后期改样式会累死...

二：防止类名冲突

在写类名的时候最好加个前缀，不然在后期可能会有css文件合并，到时候有类名冲突就尴尬了...

三：外链导入

js和css文件最好用外链式导入，如果直接放在html中不好查看，(如果其中有的样式没有用到，jsp会报错)。

四：跟标准

项目标准一定要统一好，不要自己弄自己的，跟着标准来。

五：tap

webapp中忘记click，使用tap事件。tap事件最好用js对象触发。

六：滚动条

有的手机中（小米4）会将你设置的overflow：auto的滚动条显示出来，即使你的页面内容没有超出容器宽度也会显示，所以用不到需要滚动的地方就不要加此属性！！！

七：原生js

最好使用js，webapp中对流量依赖很大，最好不要用jquery以及其他库。

BUG

一：字体大小和间距问题

首先导入下面这段代码。这段代码是已iphone6的分辨率制作的，调试的时候以页面图片制作的分辨率来调节。字体大小和间距都要用rem！！

(function(doc, win) {
	var docEl = doc.documentElement,
		resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
		　recalc = function() {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			if(clientWidth>=768){
				docEl.style.fontSize = 20 * (768 / 375) + ‘px‘;
			}else{
				docEl.style.fontSize = 20 * (clientWidth / 375) + ‘px‘;}
						
			};
			if (!doc.addEventListener) return;
			win.addEventListener(resizeEvt, recalc, false);
			doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);　

二：换行问题

页面中有的文章或者标题数据可能不会自己换行，需要添加white-space:normal;强制换行。为了防止每行最后会有单词，需要添加word-break:break-all;

三：ios和安卓原生问题

ios和安卓可以禁止调整为大字体，ios可能会吧页面中的一串数字解析为电话或者网址而改变样式，可以禁用。ios和安卓的h5控件等样式都不一样，最好用统一样式的插件。

四：后台插入文章问题

后台插入的文章可能有自己的样式，也有可能没有插入到你的元素中，此处需注意。

mui的坑

一：mui.back事件问题

最好不要使用mui-action-back，这只是普通的返回，不会刷新页面。

解决方法：1：重写mui.back=function,详情见mui文档

　　　　　2：给个id绑定事件，但是不要加mui-action-back这个类名。

　　　　　3：记住要添加window.androidBack事件，需要触发安卓手机中屏幕底部的返回事件。

总结XX网app中webapp常见的前端错误。

标签：地方   idt   fonts   超出   目标   res   cal   win   时间   

原文地址：http://www.cnblogs.com/momozjm/p/6224019.html