1、识别手机端还是pc端
if (
navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) || //苹果pc的手机宽度适配
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/i) ||
navigator.userAgent.match(/Windows Phone/i) //windows的pc端的手机宽度适配(如果pc宽度小于某种px就会true)
) {
// 移动端适配
} else {
//pc端适配
}
2、监听键盘事件
document.addEventListener(‘keydown’, onKeyDown); //创建监听事件
document.removeEventListener(‘keydown’, onKeyDown); //移除监听事件
这里需要注意的是:
1、监听事件如果想要移除成功,那么触发事件调用的函数就一定要和创建时一样,无论是传参还是内容
2、即使这样也有可能移除监听还是失败,可以在触发调用的函数的最后移除
3、手机适配页面实现适配
function gethtmlfontsize(){
// 三个步骤:
// 1.获取html的高,
let htmlheight=document.documentElement.clientHeight || document.body.clientHeight;//有些浏览器documentElement获取不到,那就使用后面的body
console.log( htmlheight);
// 2.htmlDom
let htmlDom=document.getElementsByTagName("html")[0] //获取页面的根元素
// console.log(htmlDom);
//3.设置根元素样式
htmlDom.style.fontSize=10* htmlheight/375+'px';
console.log(htmlDom.style.fontSize)
htmlDom.style.height = '100%';
}
gethtmlfontsize(); // 调用一次
window.addEventListener('resize',gethtmlfontsize) // 添加监听事件(resize是监听的意思)