1.城市列表选择字母页面滚动出现白屏:
选择字母开始滚动和滚动中:
setTimeout(()=>{
$(’.selectText’).css({’-webkit-overflow-scrolling’:‘auto’});
},10)
手指离开:
setTimeout(()=>{
$(’.selectText’).css({’-webkit-overflow-scrolling’:‘touch’});
},10)
防止ios手机正常滚动卡顿。
2.ios唤醒键盘,positon:fixed定位问题,fixed定位搜索框样式飘离。
解决方法。
布局解决:
div class=‘app’
input /
div class=‘content’ /div
/div
.app {
position: relative;
overflow: hidden;
height: 100%;
}
input {
width: 100%;
position: fixed;
top: 0;
z-index: 100;
}
.content {
height: calc(100% – 1.76rem); 减去输入框的高度,只使文本域滚动
overflow-x: scroll;
}
获取ios版本号,判断版本号
export function get_ios_version(){
var ua = navigator.userAgent.toLowerCase();
var version = null;
if (ua.indexOf(“like mac os x”) > 0) {
var reg = /os [\d.
]+/gi;
var v_info = ua.match(reg);
version = (v_info + “”).replace(/[^0-9|
.]/ig, “”).replace(/_/ig, “.”); //得到版本号9.3.2或者9.0
version = parseInt(version.split(’.’)[0]); // 得到版本号第一位
}
if(version && version<13) {
return true
} else{
return false
}
}
//判断是否是ios设备,返回true,false
var u = navigator.userAgent;
export var isIos = function () {
return !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
}
iponexr,11系列手机底部导航遮盖问题
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.tabbar{
height: 2.3rem;
}
}
//iphone XR
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
.tabbar{
height: 2.3rem;
}
}
//iphone Xs Max
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
.tabbar{
height: 2.3rem;
}
}
ios唤醒软键盘没有搜索按钮:
在ios中input输入内容后搜索,html提供type=search的模式,但是软键盘弹起后,键盘上没有“搜索”,必须在input外层加上form,必须有action