标签：osi roi 阻塞 new pre 区域 安卓手机 absolute vivo
1. 自定义弹窗
弹窗窗口居中
方案一：width:5rem;height:4rem;position:absolute;top:50%;marign-top:-(height/2); 在Android4.4 Android6.0 ios8.4.1 低版本中未按预期结果显示，不兼容;
方案二：width:5rem;height:4rem;position:absolute;top:0;bottom:0;left:0; right:0;margin:auto; 可以兼容低版本
2. IOS中input光标跑偏问题的解决方法
把position:fixed改成absolute，然后jQuery阻止移动端遮罩层后页面滚动。
这样处理后，安卓手机正常显示，ios 弹窗出现后，弹窗还是可以上下移动。但是光标不跑偏了。
参考 https://www.jianshu.com/p/b222aade3f43
https://blog.csdn.net/u011384023/article/details/79762787
3.在vivo Y23L Android4.4.4 flex布局不兼容
用float 或 display:inline-block
4. input 内容有改变做校验
$(‘.popinput1 input‘).on(‘input porpertychange‘,function(){})
5.移动端双层滚动
body里有一个 div ,内容少时滑动那部分，不阻塞；
内容多放不下时，产生滚动，当手指在那片区域时，body不滚动；在div外滚动时，正常滑动；
普通的给 div 限制高度，overflow:hidden; 当内层div 产生滚动时，body也滚动，用户体验不太好
上网查资料，最后决定用iScroll
方案一：
;$(function() { var isScrolled = false; var myScroll; function scrollInit() { return new IScroll(‘.yconbox‘, { mouseWheel: true, useTransition: false, click: true, bounce: true //false 取消回弹 }); } if ($(‘.ylist-con‘).find(‘li‘).length > 3) { // div 最多放下三条 isScrolled = true; myScroll = scrollInit(); } $(‘#share_1‘).on(‘click‘, function() { // 点击share_1 增加 li 的条数，如果未初始化iScroll, // 初始化；如果已经初始化，myScroll DOM 更新 if (isScrolled) { myScroll.refresh(); } else if ($(‘.ylist-con‘).find(‘li‘).length > 3) { myScroll = scrollInit(); } }) })
方案二：
$(function() { var scroll_flag = false; var isLiChange = false;var myScroll; var timer = setInterval(function () { if ($(‘.ylist-con‘).find(‘li‘).length > 3 && !scroll_flag) { scroll_flag = true; myScroll = new IScroll(‘.yconbox‘, { mouseWheel: true, useTransition: false, click: true, bounce: true //flase取消回弹 }); } if (isLiChange && scroll_flag) { isLiChange = false; myScroll.refresh(); } }, 100); $(‘#share_1‘).on(‘click‘, function () { $(‘.ylist-con ul‘).append(‘<li>‘ + ‘<img src="img/photo1.png" class="yavater">‘ + ‘<span class="text_max">雪飞绿叶</span>‘ + ‘<span class="fr mt-5">2012-09-13 22:23</span></li>‘); isLiChange=true; }); })
下面是相关html,css 设置 （蓝色部分是动态生成的）
.yconbox{
margin: 0 auto;
width: 5.64rem;
height:2.7rem;
background-color: #ffffff;
position: relative;
overflow: hidden;
}
第二种方案用到定时器，对性能损耗比较大。故选择第一种方案。
iScroll 文档地址 http://caibaojian.com/iscroll-5/refresh.html
以上是简单的项目总结。
标签：osi roi 阻塞 new pre 区域 安卓手机 absolute vivo
原文地址：https://www.cnblogs.com/ycyweb/p/9889664.html
