1 h5頁(yè)面嵌入到app里面需要通信
2 如果有滾動(dòng)ios會(huì)連帶著body一塊滾動(dòng) 解決辦法 使用inobounce.js解決
3 click事件 點(diǎn)擊延遲 解決辦法 使用clickfast.js
4 如果出現(xiàn)手機(jī)渲染問(wèn)題 可以加入這幾個(gè)屬性依次試一下

 transform:translate3d(0,0,0)  //css3動(dòng)畫渲染加速
 backface-visibility: hidden;  //隱藏動(dòng)畫
 transform:scale(1.000000001);  //擴(kuò)大
 transform:scale(0.999999999); //縮小

5 陰影問(wèn)題
可以給不規(guī)則圖形加陰影

filter: drop-shadow(0 0 1.33vw rgba(0, 0, 0, 0.5)) 

只能給規(guī)則圖形加陰影

box-shadow ...

6 ios手機(jī)回彈問(wèn)題 -webkit-overflow-scrolling: touch
這個(gè)屬性遇到滑動(dòng) 搜索框顯示與隱藏 會(huì)很扯淡 加載更多 加載到底部 和頂部會(huì)有回彈效果 搜索框就會(huì)顯示 解決的辦法是 監(jiān)聽滾動(dòng)條 監(jiān)聽touch事件 判斷滾動(dòng)和觸摸的方向 監(jiān)聽 觸摸速度 但是偶爾還會(huì)出現(xiàn)
直接上代碼

   public_border() {
        let tabControl = document.getElementById('tab-control')
        if (this.$refs.content.$el.clientHeight < document.body.clientHeight - (getCoupon.clientHeight + tabControl.clientHeight)) {   return }
        if (this.$refs.content.couponType !== 1) {  return   }
      },
      input_show_hide() {
        let getCoupon = document.getElementById("getCoupon");
        let scrollcontent = document.getElementById("scroll-content");
        let couponblock = document.querySelectorAll('.coupon-block')
        var startX, startY, moveEndX, moveEndY, X, Y,
          startMoveTime = 0,
          lastMoveTime = 0;
        let last_scroll_position, new_scroll_position = 0;
        scrollcontent.addEventListener("scroll", e => {
          this.public_border()
          // 滾動(dòng)條的距離
          last_scroll_position = scrollcontent.scrollTop; //10
          if (new_scroll_position < last_scroll_position && last_scroll_position > getCoupon.clientHeight) {
            // 隱藏
            getCoupon.classList.remove("slideDown");
            getCoupon.classList.add("slideUp");
          } else if (new_scroll_position >= last_scroll_position && last_scroll_position <= getCoupon.clientHeight) {
            getCoupon.classList.remove("slideUp");
            getCoupon.classList.add("slideDown");
            return
          }
          new_scroll_position = last_scroll_position; //10
        });
        scrollcontent.addEventListener("touchstart", e => {
          if (this.$refs.content.couponType !== 1) {
            return
          }
          startX = e.touches[0].pageX;
          startY = e.touches[0].pageY;
          startMoveTime = e.timeStamp || Data.now() //初始時(shí)間
          console.log(startMoveTime + "：開始時(shí)間")
        });
        scrollcontent.addEventListener("touchmove", e => {
          this.public_border()
          moveEndX = e.changedTouches[0].pageX;
          moveEndY = e.changedTouches[0].pageY;
          X = moveEndX - startX;
          Y = moveEndY - startY;
          lastMoveTime = e.timeStamp || Data.now(); //最后時(shí)間
          let moveSpeed = Math.abs(Y) / (lastMoveTime - startMoveTime);
          console.log(moveSpeed + "：速度")
          console.log(scrollcontent.scrollTop)
          // 向下拉 觸摸
          if (Math.abs(Y) > Math.abs(X) && moveSpeed > 0.5 && Y > 0) {
            getCoupon.classList.remove("slideUp");
            getCoupon.classList.add("slideDown");
          }
          // up
          else if (Math.abs(Y) > Math.abs(X) && moveSpeed > 0.5 && Y < 0) {
            getCoupon.classList.remove("slideDown");
            getCoupon.classList.add("slideUp");
          }
        });

7 class動(dòng)態(tài)添加的時(shí)候盡量不要使用js操作dom
8 上拉加載更多用的是mint ui 可以在github上查看 但是不太順暢 好像還有適配問(wèn)題 之后又用了 無(wú)限加載更多這個(gè)組件 這個(gè)組件也會(huì)有問(wèn)題 如果keep-alive 緩存 會(huì)一直加載 而且滾動(dòng)條的位置無(wú)法緩存 之后緩存的這個(gè)方案就擱淺了
9 手機(jī)端尺寸 寬高 都用vw 1-2px還用px 否則有些手機(jī)會(huì)不顯示
10 解決安卓手機(jī)圓角失效問(wèn)題

 border-radius: 2px; 
 background-clip: padding-box;

11 解決ios input 默認(rèn)圓角邊框問(wèn)題 border-radius: 0;
12 android軟鍵盤彈出 會(huì)壓縮布局問(wèn)題 給被壓縮的容器設(shè)置一個(gè)最小高度min-height
13 在能使用基本布局的情況下 不要使用flex布局 這樣會(huì)造成一些無(wú)法預(yù)知的情況
比如 下面有一個(gè)按鈕需要固定在底部 中間又有input輸入框 如果用了flex:1 當(dāng)軟鍵盤彈起的時(shí)候 中間的布局可能壓縮 這個(gè)時(shí)候把上面的布局用 智能計(jì)算高度
min-height: calc(100% - 13.06667vw); 減去的是按鈕的高度
14 android上面line-height不居中問(wèn)題
原因 1.字體大小不要使用奇數(shù)字號(hào)番枚，帶小數(shù)點(diǎn)的更不要提了讯蒲。也就是說(shuō)被2整除的整數(shù)且不可小于12px什乙。
本質(zhì)原因：
是Android在排版計(jì)算的時(shí)候參考了primyfont字體的相關(guān)屬性（即HHead Ascent、HHead Descent等）雹熬，而primyfont的查找是看font-family里哪個(gè)字體在fonts.xml里第一個(gè)匹配上，而原生Android下中文字體是沒(méi)有family name的谣膳，導(dǎo)致匹配上的始終不是中文字體竿报，所以解決這個(gè)問(wèn)題就要在font-family里顯式申明中文，或者通過(guò)什么方法保證所有字符都fallback到中文字體参歹。
15：
calc() = calc(四則運(yùn)算)
用于動(dòng)態(tài)計(jì)算長(zhǎng)度值仰楚。
需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格，例如：width: calc(100% - 10px)僧界；
任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算侨嘀；
calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；
calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則捂襟；
2.使用rem的單位時(shí)造成（根元素如果動(dòng)態(tài)改變時(shí)咬腕，根元素字體可能不是整數(shù)）。

處理辦法
table布局 在元素外再包一層葬荷，使用表格布局

<div class="container"><span class="content">Jason's Word</span> </div>
.container {display: table;}
.content {
    background-color: gray;
    font-size: 10px;
    display: table-cell;
    vertical-align: middle;
}

16 移動(dòng)端input輸入placeholder垂直不居中問(wèn)題
在移動(dòng)端編寫input輸入框時(shí)候涨共，為了輸入文字與輸入框垂直居中，一般情況下宠漩，會(huì)將input的line-height的高度等于height举反。但在移動(dòng)端輸入的時(shí)候會(huì)發(fā)現(xiàn)，雖然輸入內(nèi)容確實(shí)是垂直居中了扒吁，但是光標(biāo)的位置是靠上的火鼻，導(dǎo)致感官上的不美觀。于是對(duì)input設(shè)置的時(shí)候雕崩，首先確定字體的大小如font-size:16px魁索，其次我們確定設(shè)計(jì)稿里input的高度，如input高度為40px盼铁，那么此時(shí)的代碼應(yīng)該是這樣的：input{height:16px;line-height:16px;padding:12px 0;border:1px solid #ddd;}粗蔚，這樣的代碼在移動(dòng)端無(wú)論是視覺(jué)還是輸入時(shí)都是符合要求的∪幕穑可是html5出來(lái)一個(gè)新屬性鹏控，那就是placeholder，不得不說(shuō)這個(gè)屬性的出現(xiàn)解救了以往繁瑣的js實(shí)現(xiàn)效果趁窃，但是牧挣，當(dāng)你給input設(shè)置了placeholder后，在pc端看醒陆，好像是偏上了那么一點(diǎn)點(diǎn)瀑构，好像也不是很影響使用。但是在手機(jī)端瀏覽后刨摩，就會(huì)發(fā)現(xiàn)雖然輸入文字可以垂直居中寺晌，placeholder里的內(nèi)容明顯的靠上，嚴(yán)重的不美觀澡刹。

在網(wǎng)上查了一些資料呻征，對(duì)于原理性的解釋好像基本上沒(méi)看到。但是國(guó)外的網(wǎng)站對(duì)這個(gè)屬性給了一個(gè)默認(rèn)的建議罢浇，那就是不要設(shè)計(jì)input的line-height或者設(shè)置line-height為normal陆赋，即可沐祷。

不過(guò)，又發(fā)現(xiàn)問(wèn)題了攒岛，雖然在手機(jī)端正常赖临，但是在pc端看的時(shí)候，placeholder還是有點(diǎn)偏下的感覺(jué)灾锯。強(qiáng)迫癥害死人啊兢榨。。顺饮。那怎么辦吵聪。。兼雄。設(shè)置line-height：1.5em吟逝，或者將em換算成實(shí)際的px也可以。

17 H5微信開發(fā)iOS 6.4.7真機(jī)上input調(diào)起軟鍵盤后不回彈的解決方案
問(wèn)題描述：input輸入在iOS的微信中調(diào)起軟鍵盤之后赦肋，輸入完成收起軟鍵盤的時(shí)候頁(yè)面下方（原來(lái)軟鍵盤的位置）有空白澎办，這將導(dǎo)致下方fixed定位按鈕失效等問(wèn)題，解決方案：通過(guò)給input添加失去焦點(diǎn)事件金砍，觸發(fā)該事件的時(shí)候使頁(yè)面自動(dòng)滑動(dòng)到頂部，親測(cè)有效麦锯，代碼如下：

$("input").blur(function(){
        setTimeout(function() {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            }, 300);
    })

18 關(guān)于移動(dòng)端屏幕適配 使用vw單位 但是在pc端比例會(huì)比較大 建議在屏幕寬度比較大的情況下加上媒體查詢 例如

@media screen and (min-width: 500px) {
  body {
    max-width: 500px;
    margin: auto;
    position: relative;
  }

  .wrapper {
    position: relative;
    height: 850px;
  }

  .wrapper form {
    height: 230px;
    box-shadow: 0 2.5px 17.5px 0 rgba(0, 0, 0, 0.19);
    padding: 15px;
  }

  .wrapper form .form-title {
    font-size: 22px;
  }

  .wrapper form input {
    font-size: 23px;
    margin-top: 10px;
    border-radius: 3px;
    height: 65px;
    line-height: 22.5px;
    padding-left: 15px;
    text-align: center;
  }

  .wrapper form button {
    margin-top: 5px;
  }

  .button {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    margin-top: 20px;
    height: 65px;
    font-size: 23px;
  }

  .wrapper .rules-link {
    font-size: 20px;
  }

  .close-btn {
    width: 35px;
    height: 35px;
  }

  .wrapper .top-container .logo {
    margin-top: 10px;
    margin-left: 15px;
  }

  .rules {
    max-width: 500px;
    height: 850px;
  }

  .rules .rules-container {
    width: 385px;
  }

  .rules h3 {
    font-size: 24px;
    padding: 25px 0;
  }

  .rules ul li {
    margin-bottom: 5px;
  }

  .close-btn::before,
  .close-btn::after {
    width: 35px;
  }

  .wrapper .rules-link {
    line-height: 60px;
  }

  .success-page img {
    padding: 50px 40px;
  }

  .wrapper form .tip{
    font-size: 12px;
  }
}