1.首先清除input的默認(rèn)樣式
input, button, select, textarea {
border:none; //清除邊框
outline:none;//清除默認(rèn)邊框線
-webkit-appearance: none;//不讓他像任何的其他標(biāo)簽
border-radius: 0;//默認(rèn)圓角
-webkit-tap-highlight-color: transparent; // **點擊背景高亮一閃 ios**
}
input:focus{ outline:none; }
2.安卓手機底部有使用position:fixed;底部被鍵盤托起
<button class="next-btn button" @click="nextStep" v-show="hidshow">下一步</button>
data () {
return {
hidshow: true,
}
}
mounted () {
// 解決安卓機型底部被輸入框頂起問題,因為ios上正常所以判斷手機系統(tǒng)
//要用真機調(diào)試.瀏覽器的判斷手機系統(tǒng)不精確
const ua = window.navigator.userAgent
if (ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1) {
const docmHeight = document.body.clientHeight// 默認(rèn)屏幕高度
window.onresize = () => {
var nowHeight = document.body.clientHeight// 實時屏幕高度
if (docmHeight !== nowHeight) {
this.hidshow = false
} else {
this.hidshow = true
}
}
}
},
3.ios底部空白(這個具體我沒測到,之前好像發(fā)生過,沒那么多手機測)
<input type="text" placeholder="示例: " v-model="params.name" @blur="inputLoseFocus">
// ios兼容問題
inputLoseFocus () {
window.scrollTo(0, 0)
}
