HTML5开发注意事项及BUG解决

1.点透
Q：元素A上定位另外一个元素B，点击元素B，如果元素A有事件或链接，会触发元素A上的事件或链接，即点透
A：在元素B的touchend中增加ev.preventDefault();阻止默认事件即可，请注意：此时元素内容如果过长，其原生滑动也同时阻止

elmB.addEventListener('touchend', function (ev) {
  ev.preventDefault();
}, false);

2.区分点击与滑动
Q：元素A添加touchstart或touchend事件后，如果在元素A上滑动也会触发点击事件
A：区分是否是点击事件，有2种方法

方法一：
在touchend时判断touchmove事件是否触发即可

function tap(elm, callback) {
  elm.addEventListener('touchstart', start, false);

  function start(ev) {
    var b = false;

this.addEventListener('touchmove', move, false);
    this.addEventListener('touchend', end, false);

function move() {
      b = true;
    }

    function end(ev) {
      var touch = ev.changedTouches[0];
      var x = touch.pageX;
      var y = touch.pageY;

      if (!b) {
        if (callback) {
          callback.call(this, ev, x, y);
          ev.preventDefault();
        }
      }

      this.removeEventListener('touchmove', move, false);
      this.removeEventListener('touchend', end, false);
    }
  }
}

方法二：
touchstart时记录坐标（x1、y1），touchend时判断当前坐标（x2、y2）是否等于x1、y1

function tap(elm, callback) {
  elm.addEventListener('touchstart', start, false);

  function start(ev) {
    var touch = ev.targetTouches[0];
    var intX = touch.pageX;
    var intY = touch.pageY;

    this.addEventListener('touchend', end, false);

    function end(ev) {
      var touch = ev.changedTouches[0];
      var curX = touch.pageX;
      var curY = touch.pageY;

      if (curX == intX && curY == intY) {
        if (callback) {
          callback.call(this, ev, curX, curY);
          ev.preventDefault();
        }
      }

      this.removeEventListener('touchend', end, false);
    }
  }
}

调用：

<div>点击此处</div>

window.onload = {
  var elm = document.querySelector('div');

  tap(elm, function (ev, x, y) {
    alert('坐标：x=' + x + ', y=' + y);
  });
};

3.点击元素时加触发效果
Q：长按一个元素时如何给元素加上效果
A：首先尝试在css中给元素定义:active伪类，如果没效果则在html中给元素加上ontouchstart=""触发:active，如果还是不行，则考虑用js

动态添加样式

4.用translateX或translateY时产生抖动
Q：在给一个元素A用translate时，其后面的元素B有时会产生文字抖动或背景、边框抖动
A：给元素的父级添加translateZ即可解决

5.弹性布局宽度的问题
Q：给一行元素添加弹性布局，flex都为1，每个元素中内容长度不一致，导致不等分
A：给内部元素固定宽度即可

6.在safari浏览器中不识别日期
Q：safari浏览器中

alert(new Date('2013-11-12'));

2013-11-12这种日期格式不识别

A：在safari浏览器中设置日期需要将格式转成2013/11/12即可

7.图标模糊
Q：按照320分辨率切的图标，在iphone中图标模糊
A：iphone等手机分辨率是640的，所以图片应该按照640分辨率切，然后用background-size:50%;缩放，或写固定宽度，如在640宽度下的一

个图标宽为64px高为48px，则用backgroun-size缩放后在320分辨率下的background-size:32px 24px

8.用px切的页面在小米等手机中网页被放大
Q：用px切的页面在小米等手机的浏览器中比别的手机页面大
A：px在浏览器中表现不一致，任何浏览器默认字体大小为16px，而10px是16px的62.5%，此时设置html字号为62.5%，再用css3提供的rem（

根字号大小，即html的字号大小）将px除10进行换算即可解决

例：

html { font-size:62.5%; }
.header { font-size:1.6rem; /* 16px */ }
.footer { height:5em; /* 50px */ }

9.按照设计图切出的页面很大
Q：设计图给的是640px宽的，放到手机里看很大，用viewport缩放0.52倍在别的手机都正常，但是在小米中用自带浏览器，字号设为中，缩

放不管用
A：首先应禁止缩放，会带来别的问题，如从数据库中读出的字体带着单位如12px，字会显得非常的小
即viewport应写为

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;" />

其次用

width=device-width后，任何页面在手机里都会被解析成320宽度，所以640px的设计图中量出的单位应除2即可

10.1px的问题
Q：宽度小于1px的线有时显示不出来，等于1px的线有的细有的粗
A：网页中最小单位为1px，小于1px的线不显示出来也是正常的，应避免设置小于1px的单位。线时细时粗暂无太好的办法，一是用图片代替

，二是用很淡的颜色

11.用background-size后背景定位失效
Q：用background-size后，合并的背景图定位不准确
A：首先用了background-size后原来的单位也应该缩放，如果background-size：50%;那么量出的单位都应*0.5