JS-BOM

  |  
 阅读次数

document.documentElement.clientWidth // 设备宽度

window.innerWidth // 窗口宽度

document.documentElement.style.fontSize // 根节点 fontSize: string

let rootFZ = Number(document.documentElement.style.fontSize.split(‘px’)[0]); // 根节点 fontSize: number

事件监听

onTransitionEnd

五大浏览器 四大内核

  |  
 阅读次数

下各常用浏览器所使用的内核。

1、IE浏览器内核:Trident内核,也是俗称的IE内核;

2、Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;

3、Firefox浏览器内核:Gecko内核,俗称Firefox内核;

4、Safari浏览器内核:Webkit内核;

5、Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;

6、360浏览器、猎豹浏览器内核:IE+Chrome双内核;

7、搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);

8、百度浏览器、世界之窗内核:IE内核;

9、2345浏览器内核:以前是IE内核,现在也是IE+Chrome双内核;

移动检测

  |  
 阅读次数

[转]检测 移动端/PC端 加载不同样式表现

第一种方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
if (/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))) {
if (window.location.href.indexOf("?mobile") < 0) {
try {
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
//window.location.href = "手机页面";
console.log('手机页面')
} else if (/iPad/i.test(navigator.userAgent)) {
//window.location.href = "平板页面";
console.log('平板页面')
} else {
//window.location.href = "其他移动端页面"
console.log('其他移动端页面')
}
} catch (e) {
console.log('e:', e);
}
}
} else {
console.log('PC页面');
}

第二种方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript">
// 判断是否为移动端运行环境
if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (
/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/
.test(navigator.userAgent))) {
if (window.location.href.indexOf("?mobile") < 0) {
try {
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
// 判断访问环境是 Android|webOS|iPhone|iPod|BlackBerry 则加载以下样式
setActiveStyleSheet("style_mobile_a.css");
} else if (/iPad/i.test(navigator.userAgent)) {
// 判断访问环境是 iPad 则加载以下样式
setActiveStyleSheet("style_mobile_iPad.css");
} else {
// 判断访问环境是 其他移动设备 则加载以下样式
setActiveStyleSheet("style_mobile_other.css");
}
} catch (e) {}
}
} else {
// 如果以上都不是,则加载以下样式
setActiveStyleSheet("style_mobile_no.css");
}

// 判断完毕后加载样式
function setActiveStyleSheet(filename) {
document.write("<link href=" + filename + " rel=stylesheet>");
}
</script>


阅读原文