msforest
commented
7 years ago 移动端问题
1. 阻止移动设备自动识别页面上的电话号码、email地址
移动设备会自动识别数字开启相应的功能，通过下面代码阻止设备自动识别
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="date=no" />如果需要开启相应的功能，在link上加相应的代码如<a href="tel:8602188888888">+86 021 88888888</a>
2. IOS10.3发布后对CompositionEvent 状态的更改
复合事件是dom3级事件中新增的一类事件，用于处理IME(Input Method Editor，输入法编辑器)的输入序列，有compositionstart/compositionupdate/compositionend三种，对于输入键盘上能找到的字符一般使用change事件，而对于像中文、拉丁文等物理键盘上找不到的字符，使用复合事件进行处理；而在chrome53之后和ios10.3以后把change事件和复合事件顺序做了调整，因此变更之后需要对事件进行手动处理，在compositionend之后手动调用一次change事件。
// Opera 8.0+
const isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
const isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
const isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// 是否是IOS系统
const isIOS = navigator.userAgent.indexOf('iPhone') >= 0 || navigator.userAgent.indexOf('iPad');
// 获取IOS系统版本
const IOSVer = navigator.userAgent.match(/\d[\d]*_\d[_\d]*/i) && parseFloat(navigator.userAgent.match(/\d[\d]*_\d[_\d]*/i)[0].split('_').join('.'));
// Internet Explorer 6-11
const isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
const isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
const isChrome = !!window.chrome;
// Blink engine detection
const isBlink = (isChrome || isOpera) && !!window.CSS;
let isComposition = false;
element.addEventListener('compositionstart', function(e){
isComposition = true;
}, false};
element.addEventListener('compositionend', function(e){
isComposition = false;
if(isChrome || (isIOS && IOSVer >= 10.3) ){ // 判断浏览器是否是Chrome 或者 是否是IOS系统以及 IOS版本是否 大于等于10.3
dothing();
}
}, false};
element.addEventListener('change', function(e){
if(!isComposition ) {
dothing();
}
}, false};3. 使用弹窗的时候，遮罩层底部会随着滚动
解决方法：在点击弹窗的入口时设置页面高度为100%，消失的入口设置高度为auto
$scope.showMask = function{
angular.element('html,body').css({overflow:'hidden', height: '100%'});
}
$scope.hideMask = function(){
angular.element('html,body').css({overflow:'auto', height: 'auto'});
}4.在当前页面滑动列表的时候点返回按钮，上一页的页面整体往上移动了
解决方法：在回到上一页时，使用$timeout()重新设置样式
$timeout(function(){
angular.element('html,body').css({height: '100%'})
}, 0);5.手机输入框输入中文时，输入框会显示中文拼音+中文
解决方法：对输入框进行复合事件监听(IME)
let lock = false;
angular.element('input').bind('compositionstart', function(e){
lock=true;
}).bind('compositionend', function(e){
lock=false;
}).bind('input', function(e){
if(lock) return ;
doanything();
});6. 当列表数据过多，用户选中的数据未显示在屏幕内，即用户需要滑动才能看见所选中的数据
解决方法：使用scrollIntoView()方法（javascript高级程序设计第三版304页声明所有浏览器都已实现该方法）
移动端问题
桌面端问题
angular问题
javascript问题
css问题
webpack
linux