问题出现的背景:
在IOS11中position:fixed弹出框中的input出现光标错位的问题
解决方案
一、设计交互方面最好不要让弹窗中出现input输入框;
二、前端处理此兼容性的方案思路:
1、判断手机机型:Android or ios ios11 or ios其他
/*ver 是IOS的版本,如果是Android ver就不是数组*/
var ver = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
if(Array.isArray(ver)){
ver = parseInt(ver[], );
}
2、判断弹出框出现的位置
a、点击事件后将包含input的弹出框position:fixed改成position:absolute
b、计算弹出框的位置,如果clickbutton在屏幕的一半的上方,让弹出框保持在屏幕的中上方,如果clickbutton在屏幕的一半的下方,让弹出框保持在屏幕的中下方
/*
#get_award 是clickbutton
.tan_box 是弹出框
*/
$("#get_award").click(function () {
var top = $(this).position().top;/*点击按钮距离屏幕顶部的相对*/
var scrollTop = $(document).scrollTop();/*滚动条的位置*/
var window_height = $(window).height();/*屏幕的可视高度*/
var box_height = $(".tan_box").height();/*弹框的高度*/ top1 = top - scrollTop;
window_height = window_height/; if(top1<window_height){
if(top1<box_height/){
var top2 =top++box_height/
}else{
var top2 = window_height+(top+)/+box_height/
}
$(".tan_box").css("top", top2);
}else{
if(window_height-top1<box_height/){
var top2 = top--box_height/
}else{
var top2 = (top+)/+box_height/
} $(".tan_box").css("top", top2);
} })