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時記錄座標（x一、y1），touchend時判斷當前座標（x二、y2）是否等於x一、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