フロントエンドiosスタイル互換性の問題
携帯電話のページで、最も頭が痛いのはスタイルの互換性の問題で、異なる機種の中で最も頭が痛いのはiosです.今日はよくある質問をまとめてみましょう.
一、位置決めについて:
固定位置決めの使用はできるだけ避ける
二、ページはスライドするが、カーソルはその場で動かず、inputボックスに従って移動しない:
カーソルが動かない以上、いっそ消えてしまったほうがいい.ページ移動イベントをリスニングし、すべてのinputがフォーカスを失う
三、ios inputのデフォルトスタイルを除去する:
四、iosページのリバウンドを阻止する
これを引用するhttps://github.com/lazd/iNoBounce中のinobouncemin.js
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スタイルの問題はきっとこのいくつかだけではなくて、後で関連する問題に出会って引き続き補充して、興味のある小さい仲間も引き続き補充することを歓迎します~