1.首先清除input的默认样式
input, button, select, textarea {
border:none; //清除边框
outline:none;//清除默认边框线
-webkit-appearance: none;//不让他像任何的其他标签
border-radius: 0;//默认圆角
-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上正常所以判断手机系统
//要用真机调试.浏览器的判断手机系统不精确
const ua = window.navigator.userAgent
if (ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1) {
const docmHeight = document.body.clientHeight// 默认屏幕高度
window.onresize = () => {
var nowHeight = document.body.clientHeight// 实时屏幕高度
if (docmHeight !== nowHeight) {
this.hidshow = false
} else {
this.hidshow = true
}
}
}
},
3.ios底部空白(这个具体我没测到,之前好像发生过,没那么多手机测)
<input type="text" placeholder="示例: " v-model="params.name" @blur="inputLoseFocus">
// ios兼容问题
inputLoseFocus () {
window.scrollTo(0, 0)
}
