H5开发问题总结

H5开发问题总结

最近从事H5开发，遇到一些问题，想记录下来与君共勉。

一.移动端适配问题

移动端适配问题是开发H5首先要解决的问题，以前的时候据说是采用了媒体查询的方式，后来采用了rem的方式。
我选择的是rem的适配方式，采用750的ui图时，px 与 rem之间的比例是100:1，也就是说图片高度是100px,自己的代码就是1rem。

1.设置meta标签

2.设置rem，将rem的设置放在一个js文件中，在header中引入

var initFontSize = function() {
    var _viewportWidth;
    var lock = false;
    var _htmlNode = document.getElementsByTagName('html')[0];
    var _scrollWidth = window.innerWidth || screen.availWidth || document.documentElement.scrollWidth;
    // var _scrollHeight = (screen.height > 0) ? (window.innerHeight >= screen.height || window.innerHeight == 0) ? screen.height : window.innerHeight : window.innerHeight
    var maxWidth = 750;
    // _viewportWidth = _scrollHeight > _scrollWidth ? _scrollWidth : _scrollHeight;
    _htmlNode.style.fontSize = '100px';
    if (_scrollWidth < 150 || _scrollWidth > 750) {
        setTimeout(function() {
            !lock && initFontSize();
            lock = true;
        }, 200)
    } else {
        _htmlNode.style.fontSize = _scrollWidth / maxWidth * 100 + 'px';
    }
}
initFontSize();
window.onresize = function(){
    initFontSize();
}

二. 1px 边框问题

由于不同的手机有不同的像素密度，有时我们设置的1px边框感觉比预计粗一点达到了2px水准。这个时候我们采用的是 伪类+transform 来模拟1px边框。
假如将下面的代码放在公共的css中，在开发过程中遇到加1px边框的情况时，直接给标签一个 border-1px的class类就可以解决1px问题。

.border-1px{ 
	 position: relative;
	 border:none; 
}
.border-1px:after{   
 	 content: '';    
 	 width: 100%; 
 	 height: 1px; 
 	 position: absolute;
 	 bottom: 0;    
 	 background: #eee;      
 	 transform: scaleY(0.5);     
 	 transform-origin: 0 0; 
}

三. 上传文件并预览

首先了解一下label标签

Male

“for” 属性可把 label 绑定到另外一个元素。把 “for” 属性的值设置为相关元素的 id 属性的值。
举个栗子：

  Male 
 

在我们点击male的时候，会触发到input，利用这个可以制作漂亮的上传文件功能。将input设置成display：none,当点击label中的内容时就触发上传功能，可以在label中预先定义好一些漂亮的样式。

function upImg(e) {
	var imgFile = e.target.files[0];
	var fs = new FileReader();
	  fs.onload = function() {
	      $(".upImg").attr({
	          src : fs.result
	      })
	  };
	 fs.readAsDataURL(imgFile);
}

你以为这样就完了？你可能还有遇到一个问题，有的时候我们要删除图片，这个很好办，但是如果在次上传同一张图片你会发现onchange事件不再触发了。
onchange的触发是通过value值的改变，当上传同一张图片的时候由于value并没有改变，所以问题的关键在于value的改变。在上传时候可以将input中的value设置成空。

function upImg(e) {
	var imgFile = e.target.files[0];
	var fs = new FileReader();
	  fs.onload = function() {
	      $(".upImg").attr({
	          src : fs.result
	      })
	  };
	$("#file").val("")
}