HTML 5開発上の注意事項及び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つの方法があります
方法1: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);

    }

  }

}

 
方法2:touchstart時に座標(x 1,y 1)を記録し、touchend時に現在の座標(x 2,y 2)がx 1,y 1に等しいか否かを判断する
 

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.translate Xまたはtranslate Yを使用した場合のジッタQ:ある要素Aにtranslateを使用した場合、その後ろの要素Bに文字のジッタや背景、枠線のジッタAが発生する場合がある:要素の親にtranslate Zを追加すれば解決できる
5.フレックスレイアウト幅の問題Q:1行の要素にフレックスレイアウトを追加し、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幅のアイコン幅が64 px高さ48 pxの場合、backgroun-sizeでスケーリングした後、320解像度のbackground-size:32 px 24 px
8.pxでカットされたページは小米などの携帯電話でページが拡大されるQ:pxでカットされたページは小米などの携帯電話のブラウザで他の携帯電話のページより大きいA:pxはブラウザで一致せず、どのブラウザでもデフォルトフォントサイズは16 pxで、10 pxは16 pxの62.5%で、このときhtml番号を62.5%に設定し、さらにcss 3で提供されるrem(ルートサイズ、すなわちhtmlのサイズ)でpxを10で割って換算すれば解決します
例:

html { font-size:62.5%; }

.header { font-size:1.6rem; /* 16px */ }

.footer { height:5em; /* 50px */ }

 
9.設計図に従って切り取ったページが大きいQ.設計図は640 px幅で、携帯電話に入れて見ると大きく、viewportで0.52倍拡大するのは他の携帯電話でも正常だが、小米ではブラウザを持参し、字号を中に設定し、拡大縮小は役に立たないA:まず拡大縮小を禁止すべきで、データベースから読み出したフォントが12 pxのような別の問題をもたらす.字はとても小さく見えます.つまりviewportは

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

 
に続く
width=device-width後、どのページも携帯電話で320幅に解析されるので、640 pxの設計図で計測された単位は2を除けばよい
10.1 pxの問題Q:幅が1 px未満の線は表示されない場合があります.1 pxに等しい線には細い太いAがあります.ページの最小単位は1 pxで、1 px未満の線は表示されないのも正常です.1 px未満の単位は避けてください.線が細いときは太くてもあまり良い方法はありません.一つは画像で代用し、もう一つは薄い色で代用します.
11.background-sizeでバックグラウンド位置決めが失効Q:background-sizeでマージしたバックグラウンドマップの位置決めが不正確A:まずbackground-sizeで元の単位もスケールすべきで、background-size:50%では、量った単位はすべて*0.5でなければなりません.