移动端ios问题总结

  • Post author:
  • Post category:其他


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



版权声明:本文为qq_43661347原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。