總結(jié)：

• 一、在ios上光標(biāo)顯示過長的問題
• 二、ios/android在瀏覽器中上下滑動一閃一閃（回彈效果）
• 三、display: flex 遇到white-space: nowrap;
• 四、讓標(biāo)點(diǎn)符號不出現(xiàn)在行首
• 五、解決ios短信驗(yàn)證碼自動填充兩遍的問題
• 六、h5圖片上傳，IOS圖片會出現(xiàn)旋轉(zhuǎn)
• 七、分享的帶參數(shù)的鏈接在ios QQ中打不開的問題
• 八、彈出的輸入法遮擋輸入框的解決辦法
• 九、關(guān)于ios input 獲取焦點(diǎn)彈出鍵盤，鍵盤收回頁面上滑無法還原的問題
• 十、關(guān)于日期寫法的問題
• 十一、axios請求成功進(jìn)入catch或者flyio請求成功也進(jìn)入err，【檢查語法是否錯誤】

1、在ios上光標(biāo)顯示過長的問題

方案1

不要給input 設(shè)置高度，用padding撐開

方案二

更改 input 的 line-height 值，讓值變小些

2、ios/android在瀏覽器中上下滑動一閃一閃（回彈效果）

activated() {
  <!--禁止回彈-->
  document.addEventListener('touchmove', this.evt, {passive: false})
},
deactivated() {
  <!--啟用回彈-->
  document.removeEventListener('touchmove', this.evt, false)
},
methods: {
    evt(e) {
      e.preventDefault()
    },
}

注意： vue中禁止回彈效果后可能會對其他頁面滑動有影響，需在離開頁面的時候啟用回彈效果

3、display: flex 遇到white-space: nowrap;

當(dāng)父級為flex布局，某一子元素超出文字需要隱藏的情況下，會導(dǎo)致另一元素出現(xiàn)被壓扁的現(xiàn)象。

<div class="items flex">
    <div class="items-img"><img src="img.jpg" /></div>
    <div class="items-content">
        <h3>我是很多很多的文字很多很多很多很多哦把我假想成文字吧。</h3>
        <div class="text">我是個描述</div>
    </div>
</div>
.items-content{
  min-width: 0;
  .text{
    width:100%;
  }
}

4、讓標(biāo)點(diǎn)符號不出現(xiàn)在行首

word-break:break-all;這條語句的作用是讓語句到達(dá)邊界的時候自動換行，但是正是這個樣式讓標(biāo)點(diǎn)符號跑到了行首。

要想標(biāo)點(diǎn)符號不出現(xiàn)在行首，又能實(shí)現(xiàn)自動換行，只需要將樣式寫成如下：

word-break : normal;
word-wrap:break-word;

5、解決ios短信驗(yàn)證碼自動填充兩遍的問題

這是蘋果系統(tǒng)的一個bug，可以通過監(jiān)聽input，然后截取。
maxlength 失效也可以用此方法

<input type="number" οninput="if(value.length>6) value=value.slice(0,6)"/>

6、h5圖片上傳，IOS圖片會出現(xiàn)旋轉(zhuǎn)

<input type="file" accept="image/jpg" @change="upload"/>

import { EXIF } from 'exif-js'
...
methods: {
  upload(e) {
     let file = e.target.files[0];
     this.fileImage(file)
  },
  fileImage(file) {
    // 處理ios下圖片旋轉(zhuǎn)的問題
    if (!file || !window.FileReader) return false;
    // 獲取照片方向角屬性，用戶旋轉(zhuǎn)控制
    EXIF.getData(file, function() {
        EXIF.getAllTags(this);
        Orientation = EXIF.getTag(this, 'Orientation');
    })
    let oReader = new FileReader(); // 創(chuàng)建一個reader
    oReader.onload = function(e) {
        var image = new Image()
         image.src = e.target.result
         image.onload = function() {
            var expectWidth = this.naturalWidth
            var expectHeight = this.naturalHeight
            if (this.naturalWidth > this.naturalHeight &&this.naturalWidth > 800) {
                expectWidth = 800
                expectHeight =(expectWidth * this.naturalHeight) / this.naturalWidth
            } else if (this.naturalHeight > this.naturalWidth &&this.naturalHeight > 1200) {
                expectHeight = 1200
                expectWidth =(expectHeight * this.naturalWidth) / this.naturalHeight
            }
            var canvas = document.createElement('canvas')
            var ctx = canvas.getContext('2d')
            canvas.width = expectWidth
            canvas.height = expectHeight
            ctx.drawImage(this, 0, 0, expectWidth, expectHeight)
            var base64 = null
            // 如果方向角不為1，都需要進(jìn)行旋轉(zhuǎn)
            if (Orientation !== '' && Orientation !== 1) {
              switch (Orientation) {
                 case 6: // 順時針90度
                    that.rotateImg(this, 'left', canvas)
                    break
                 case 8: // 逆時針90度
                    that.rotateImg(this, 'right', canvas)
                    break
                  case 3: // 180度旋轉(zhuǎn)
                     that.rotateImg(this, 'right', canvas) // 轉(zhuǎn)兩次
                     that.rotateImg(this, 'right', canvas)
                     break
                   }
               }
               base64 = canvas.toDataURL('image/jpeg', 0.8)
               that.uploadImg2().then(data => {
                  that.loadingDial.hide()
               })
            }
      }
      oReader.readAsDataURL(file)
  }
}

7、分享的帶參數(shù)的鏈接在ios QQ中打不開的問題

排查1：所帶參數(shù)中含有關(guān)鍵字，與qq沖突
目前遇到的關(guān)鍵字為：sign
排查2：如果所帶參數(shù)是一個對象，則需要反編譯（decodeURIComponent）2次（因?yàn)閝q自動幫你編譯了一次）。

8、彈出的輸入法遮擋輸入框的解決辦法

方案一:

此方案適合底部固定的輸入框，手機(jī)自帶瀏覽器能完美解決，但對于第三方輸入法部分手機(jī)不行。

// 當(dāng)輸入框失去焦點(diǎn)的時候調(diào)用
<input placeholder="請輸入"  v-model.trim="value"  @blur="onBlur"/>

methods: {
  onBlur() {
    setTimeout(() => {  
      document.body.scrollTop = document.body.scrollHeight;  
    },300);
  }
}

方案二：

此方案目前為止沒發(fā)現(xiàn)大的問題，目前為止算是我比較常用的。
定義一個div，高度大約320px左右，相當(dāng)于輸入法的高度（此處寫死不直接獲取輸入法的高度是因?yàn)椴糠质謾C(jī)獲取不到輸入法高度）。當(dāng)input獲取焦點(diǎn)時，div顯示占位，失去焦點(diǎn)時，div隱藏。

實(shí)踐發(fā)現(xiàn)有一問題：部分手機(jī)獲取焦點(diǎn)調(diào)出鍵盤后，直接點(diǎn)擊軟鍵盤的關(guān)閉按鈕會直接關(guān)閉軟鍵盤，但是輸入框并未失去焦點(diǎn)。導(dǎo)致div未隱藏，底部一大空白?？影?，想哭！?。。。。。?！

// div寫在所有節(jié)點(diǎn)的最底部
<template>
  <div class="wrapper">
    ...
    <input placeholder="請輸入" v-model.trim="value"  @click="getFocus($event)" @blur="onBlur"/>

     // 占位div
    <div v-if="isShowPlaceHolder" class="place-holder" style="height: 320px;"></div>
  </div>
</template>

data() {
  return {
    isShowPlaceHolder: false
  }
},
methods: {
  getFocus(e) {
    // 解決input在 ios手機(jī)上點(diǎn)擊不易獲取焦點(diǎn)的問題
    e.target.focus()
    // 顯示
    this.isShowPlaceHolder = true 
   },
  onBlur() {
    // 隱藏
    this.isShowPlaceHolder = false
  }
}

方案三：

適合輸入框在頁面的中間位置。主要思路就是獲取焦點(diǎn)時，讓input滾動到頁面中間

let ele = document.getElementById('dom')
setTimeout( () => {
    ele.scrollIntoView({block: "end", behavior: "smooth"});
    ele.scrollIntoViewIfNeeded();
}, 200);

最終方案：

app原生開發(fā)解決，對于他們來說是一句代碼的事，不過也會有不同機(jī)子，尤其是安卓的兼容問題。但是真的比起h5方便太多啦。

9、關(guān)于ios input 獲取焦點(diǎn)彈出鍵盤，鍵盤收回頁面上滑無法還原的問題

// 失去焦點(diǎn)時，讓dom滾動到底部
setTimeout(() => {
  const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
  window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);

10、關(guān)于日期寫法的問題：

new Date("2019-11-29")在安卓上正常，在ios上有時會直接返回NaN。
原因：ios不支持 -和.連接日期，需要寫成斜杠/

// 不能寫成 new Date("2019-11-29 12:30:00"), ios不支持-
new Date("2019/11/29 12:30:00")
或者
new Date("2019-11-29 12:30:00".replace(/-/g, "/"));
new Date("2019.11.29 12:30:00".replace(/\./g, "/"));