フロントエンドiosスタイル互換性の問題

976 ワード

携帯電話のページで、最も頭が痛いのはスタイルの互換性の問題で、異なる機種の中で最も頭が痛いのはiosです.今日はよくある質問をまとめてみましょう.
一、位置決めについて:
固定位置決めの使用はできるだけ避ける
二、ページはスライドするが、カーソルはその場で動かず、inputボックスに従って移動しない:
カーソルが動かない以上、いっそ消えてしまったほうがいい.ページ移動イベントをリスニングし、すべてのinputがフォーカスを失う
//      ,    created   ok,      ,        
 mounted() {
    window.addEventListener("touchmove", this.myTouchMove);
  }



myTouchMove() {
      if (document.hasFocus) {
        var inputList = document.getElementsByTagName("input"); //   input
        for (var i = 0; i < inputList.length; i++) {
          inputList[i].blur(); // input  
        }
      }
    },

三、ios inputのデフォルトスタイルを除去する:
input, textarea {
  -webkit-appearance:none;
}

四、iosページのリバウンドを阻止する
これを引用するhttps://github.com/lazd/iNoBounce中のinobouncemin.js
import "../inobounce.min.js";

iosスタイルの問題はきっとこのいくつかだけではなくて、後で関連する問題に出会って引き続き補充して、興味のある小さい仲間も引き続き補充することを歓迎します~