一向做前端事情，却从来没有开辟过平板的项目，想来也是有遗憾的，孰知，新公司的第二个项目就是要适配平板，刚开始是懵的，关于兼容，觉得是本身的短板，但光荣的是这一版只须要兼容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;