h5移動端常見的問題及解決方案

大鵬_yp發表於2021-03-12
H5

 01、ios端相容input高度

#問題描述

　　input輸入框游標，游標的高度和父盒子的高度一樣,而android手機沒問題

　　android　　

　　　　

　　ios

　 　　

#產生原因

　　通常我們習慣用height屬性設定行間的高度和line-height屬性設定行間的距離（行高），當點選輸入的時候，游標的高度就自動和父盒子的高度一樣了。（谷歌瀏覽器的設計原則，還有一種可能就是當沒有內容的時候游標的高度等於input的line-height的值，當有內容時，游標從input的頂端到文字的底部

#解決

padding　　去替換　　line-height

.content {
  box-sizing: border-box;
  height: 88px;
  .content-input {
    display: block;//塊元素
    box-sizing: border-box;//怪異盒模型
    width: 100%;
    font-size: 28px;
    //line-height: 88px;
    padding: 30px 0;
  }
}

02、ios上下滑動頁面卡頓，頁面缺失

#問題描述

　　在ios端，上下滑動頁面時，如果頁面高度超出了一屏，就會出現明顯的卡頓，頁面有部分內容顯示不全的情況，例如下圖，右圖是正常頁面，邊是ios上下滑動後，卡頓導致如左圖下面部分丟失。

#產生原因

 　　微信瀏覽器的核心，Android上面是使用自帶的WebKit核心，iOS裡面由於蘋果的原因，使用了自帶的Safari核心，Safari對於overflow-scrolling用了原生控制元件來實現。對於有-webkit-overflow-scrolling的網頁，會建立一個UIScrollView，提供子layer給渲染模組使用。

　　原來在iOS5.0以及之後的版本,滑動有定義兩個值auto和touch,預設值為auto.
　　　　-webkit-overflow-scrolling:touch; 當手指從觸控式螢幕上移開,會保持一段時間的滾動.
　　　　-webkit-overflow-scrolling:auto; 當手指從觸控式螢幕上移開,滾動會立即停止.

#解決

　方案一

在需要滑動的位置加上如下css程式碼：
overflow:scroll;
-webkit-overflow-scrolling:touch;

#存在問題

1、在滑動介面之中使用的position：fixed 無法固定下來，會隨著介面進行一起滾動

　　解決方法：將使用的position：fixed（頭部導航）寫在滑動部位外部，在使用絕對定位進行佈局，以此解決問題

2、vue中使用v-if導致的介面初始化之後無法滑動

　　解決方法：將v-if改成v-show進行展示，解決介面進入之後第一次不能滑動的問題

#擴充套件

　　-webkit-overflow-scrolling 屬性控制元素在移動裝置上是否使用滾動回彈效果.auto: 使用普通滾動, 當手指從觸控式螢幕上移開，滾動會立即停止。touch: 使用具有回彈效果的滾動, 當手指從觸控式螢幕上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆疊上下文

 

03、input輸入框在iOS中獲取到焦點之後介面上移無法回落問題

#問題描述

　　輸入內容，軟鍵盤彈出，頁面內容整體上移，但是鍵盤收起，頁面內容不下滑

#產生原因

　　固定定位的元素 在元素內 input 框聚焦的時候 彈出的軟鍵盤佔位 失去焦點的時候軟鍵盤消失 但是還是佔位的 導致input框不能再次輸入 。

#解決

 <input
      class="content-input"
      placeholder="請輸入姓名"
      v-model="peopleList.name"
      @blur.prevent="changeBlur()"
    />
changeBlur(){
  let u = navigator.userAgent, app = navigator.appVersion;
  let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if(isIOS){
    setTimeout(() => {
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    }, 200)
  }
}

#擴充套件

  • prevent：　　 　　阻止預設事件
  • blur:　　　　　　　 失去焦點
  • position:fixed　　的元素在ios裡，收起鍵盤的時候會被頂上去，特別是第三方鍵盤

04、介面點反應慢、延時問題解決方案

#產生原因

　　iOS巢狀介面之後，介面點選效果會自動產生一個300毫秒的延時

#解決

1、下載fastclick
　　npm i -S fastclick
2、引入
　　 FastClick.attach(document.body);

#存在問題

　　引入fastclick之後，會有一個副作用：input輸入框需要連續點選兩次或者長按才能獲取焦點

|解決

　　再引入fastClick的js中加入如下程式碼即可解決input輸入框點選不能獲取焦點的問題

FastClick.prototype.focus = function(targetElement) {
  var length;

  if (deviceIsIOS&& targetElement.setSelectionRange && 
　　　　targetElement.type.indexOf('date') !== 0 &&
 　　　　targetElement.type !== 'time' && 
　　　　targetElement.type !== 'month') {

    length = targetElement.value.length;
    targetElement.focus();
    targetElement.setSelectionRange(length, length);
  } else {
    targetElement.focus();
}
};

05、new Date()轉換時間在iOS中不生效問題

#產生原因

　　前端介面使用new Date('2021-3-14 23:59:59').getTime()，iOS不解析。

#解決

　　換用其他格式：new Date('2021-3-14T23:59:59').getTime()

06、關於部分拷貝方法在iOS中不生效問題

#解決

　　前端有時候需要用到拷貝部分內容到剪下板中，但是在使用時發現，部分網上提供的拷貝方法在Android中正常使用，但是在iOS中無法進行拷貝，經過試驗發現一種通用的拷貝方法，如下：

/**

* 將內容拷貝到剪下板中

*/

function copyContent(message) {

　　 // text: 要複製的內容， callback: 回撥

  var input = document.createElement("input");

  input.value = message;

  document.body.appendChild(input);

  input.select();

  input.setSelectionRange(0, input.value.length);

  document.execCommand('Copy');

  document.body.removeChild(input);

}

07、android彈出的鍵盤遮擋輸入框

#解決

　　給input和textarea標籤新增focus事件

　　先判斷是不是安卓手機下的操作，當然，可以不用判斷機型，Document 物件屬性和方法，setTimeout延時0.5秒，因為呼叫安卓鍵盤有一點遲鈍，導致如果不延時處理的話，滾動就失效了

changefocus(){
  let u = navigator.userAgent, app = navigator.appVersion;
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
  if(isAndroid){
    setTimeout(function() {
      document.activeElement.scrollIntoViewIfNeeded();
      document.activeElement.scrollIntoView();
    }, 500);       
  }
},

 08、iOS上拉邊界下拉出現白色空白

#問題描述

　　手指按住 螢幕下拉，螢幕頂部會多出一塊白色區域.手指按住螢幕上拉,底部多出一塊白色區域。

#產生原因

　　在iOS中,手指按住螢幕上下拖動,會觸發touchmove事件.這個事件觸發的物件時整個webview容器.容器自然會被拖動,剩下的部分會成空白

#解決

<template>
  <div id="app" @touchmove="handleTouch">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
<script>
export default {
    created () {
        document.body.addEventListener('touchmove', (e) => {
          if (e._isScroller) return;
          e.preventDefault()
        }, {
          passive: false
        })
  },
  methods: {
    handleTouch (e) {
      e._isScroller = true
    }
  }
}
</script>
<style>
html,body {
  height: 100%;
  overflow: hidden;
}
#app {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
<style>

 

相關文章