首先上一段判断android和ios的js代码
function navigator(){ var u = navigator.userAgent; var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if(isAndroid){ //安卓 }; if(isiOS){ //ios }; }; navigator();
IOS常见问题：
1.搜索页的搜索按钮不显示，加form解决。
<form action=""> <input type="search" name="" id="" value="" /> </form>
2.去除input阴影和黑边，以及type=“search”的小叉叉。
css：
//去除阴影和黑底
input:-webkit-appearance:none;(全局input都会去除阴影和黑底，可以针对某个input就行了。)
//去除小叉叉
input[type="search"]::-webkit-search-cancel-button{
-webkit-appearance:none;
}
ios:监听键盘弹起和收起：
$(document).on("focusin",function(){
//键盘弹出
})
$(document).on("focusout",function(){
//键盘收起
})
ios:当头部输入框聚焦时，想要弹起底部固定定位的元素，放在键盘上方，比如footer，或者上传图片的按钮什么的，但是发现弹不起来，没关系我有解决方法。
function navigator(){
var u = navigator.userAgent;
var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isAndroid){
};
if(isiOS){
$(document).on("focusin",function(){
//键盘弹起时，让滚动条滚动到底部，
$(window).scrollTop($("body").height());
//设置定时器
setTimeout(function(){
//获取文档高度
var clientHeight= document.body.clientHeight;
//获取滚动高度--也就是键盘高度
var scrollTop = document.body.scrollTop;
//让你想要的底部元素的bottom：键盘高度。
$(".bottom").css("bottom",scrollTop+"px");
//最后再设置一个定时器让滚动条回到顶部。
setTimeout(function(){
$(window).scrollTop(0);
},300);
},300);
});
$(document).on(‘focusout‘, function () {
//软键盘收起的事件处理
//让底部元素回到底部。
$(".bottom").css("bottom","0");
});
};
};
navigator();
android：
1.键盘收起事件：
function navigator(){
var u = navigator.userAgent;
var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isAndroid){
var wHeight = $(window).innerHeight(); //获取初始可视 窗口高度
$(window).resize(function() { //监测窗口大小的变化事件
var hh = $(window).innerHeight(); //当前可视窗口高度
var viewTop = $(window).scrollTop(); //可视窗口高度顶部距离网页顶部的距离
if(wHeight > hh){
//可以作为虚拟键盘弹出事件
}else{
//可以作为虚拟键盘关闭事件
};
wHeight = hh;
});
};
if(isiOS){
};
};
navigator();
