本篇文章记录前端在移动端开发过程中遇到的各种问题，
持续更新中～
1. 判断设备类型
var u = window.navigator.userAgent; // 返回当前浏览器的用户代理
var p = window.navigator.platform; // 返回一个字符串,表示浏览器所在的系统平台类型
window.browserVersion = { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
ie11: u.indexOf('Trident') > -1 && u.indexOf('rv:11.0') > -1,//ie11
ie10: u.indexOf('Trident') > -1 && u.indexOf('MSIE 10.0') > -1, //ie10
presto: u.indexOf('Presto') > -1, //opera内核
webkit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
chrome: u.indexOf("Chrome") > -1, //谷歌
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
safari: u.indexOf('Safari') > -1 && u.indexOf('Chrome') == -1 && u.indexOf('Baidu') == -1, //Safari浏览器
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
iphone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
ipad: u.indexOf('iPad') > -1, //是否iPad
ipadpro:false,
webapp: u.indexOf('Safari') == -1, //是否web应用程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1,
qq: u.indexOf('QQ') > -1,
language: navigator.browserLanguage || navigator.language,
macos: (p == 'Mac68K') || (p == 'MacPPC') || (p == 'Macintosh') || (p == 'MacIntel'),
windows: (p == 'Win32') || (p == 'Win64') || (p == 'Windows'),
win7before: (u.indexOf('Windows NT 5.0') > -1) ||
(u.indexOf('Windows 2000') > -1) ||
(u.indexOf('Windows NT 5.1') > -1) ||
(u.indexOf('Windows XP') > -1) ||
(u.indexOf('Windows NT 5.2') > -1) ||
(u.indexOf('Windows 2003') > -1) ||
(u.indexOf('Windows NT 6.0') > -1) ||
(u.indexOf('Windows Vista') > -1)
}
if(window.browserVersion.android){
window.browserVersion.mobile=true;
}
if(navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && window.browserVersion.macos===true){
window.browserVersion.ios=true;
window.browserVersion.mobile=true;
window.browserVersion.ipadpro=true;
window.browserVersion.macos=false;
}
注意：navigator虽然是只读的，但是用户是可以通过修改设备信息来篡改其内容的，这些情况不做考虑。
2. 安卓手机软键盘弹出后遮挡输入框
// 判断是否是安卓设备的方法如上
if(isAndroid) {
window.addEventListener("resize", function() {
if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
// 为了解决有些机器打开比较慢的情况
window.setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
// 或者这种写法 document.activeElement.scrollIntoView({behavior: 'smooth', block: 'end', inline: 'nearest'});
},0);
}
})
}
注意：该方法可以解决一部分问题，还有很多与输入法、浏览器、webView有关，比如有的输入法弹出的时候不会自动滚动，但是输入第一个字符的时候就会滚动到对应的位置，有的浏览器在键盘弹出的时候不会触发resize等。所以在设计的时候尽量避免输入框在下面的设计。
编辑自2021-3-23，
持续更新中～
