首次寫iPad佈局感想（H5）

一直作前端工做，卻歷來沒有開發過平板的項目，想來也是有遺憾的，孰知，新公司的第二個項目就是要適配平板，剛開始是懵的，對於兼容，感受是本身的短板，但慶幸的是這一版只須要兼容iOS系統就能夠。

那我如今就說下開發iOS h5項目可能會進到的誤區（知道很菜，可是寫出來也是對本身加深印象）

- ios的專有meta

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
......列舉經常使用，其餘用時可百度

不要覺得引入<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">對於禁止屏幕縮放就萬事大吉了，這隻針對於谷歌瀏覽器，要想兼容蘋果自帶的Safari還須要寫入下面這段代碼

window.onload=function () {
      document.addEventListener('touchstart',function (event) {
        if(event.touches.length>1){
          event.preventDefault();
        }
      })
      var lastTouchEnd=0;
      document.addEventListener('touchend',function (event) {
        var now=(new Date()).getTime();
        if(now-lastTouchEnd<=300){
          event.preventDefault();
        }
        lastTouchEnd=now;
      },false)
    }

- button、input、textarea觸發時的灰色背景塊（高亮顯示）
這都是須要咱們去禁止的，畢竟要還原設計稿嘛，這是就要加入這幾個屬性

-webkit-appearance: none;
  outline: none;
  -webkit-tap-highlight-color: rgb(0, 0, 0, 0);透明度須要爲0
  -webkit-user-modify: read-write-plaintext-only;

- 頁面滾動效果
若是在須要滾動的區塊內添加了overflow: auto;這個樣式
確定會發現滾動的效果不是很流暢，這時就須要在body上添加一個樣式overflow-x: hidden; 實現方式不止一種 也能夠在滾動快上添加webkit-overflow-scrolling: touch;