移动浏览器使用JS获取各种尺寸的兼容性问题
近期在产品中发现JS获取不同浏览器的尺寸, 返回结果大不一样, 主要问题出现在华为浏览器(甚至最新的P9)和UC浏览器(11.0.8版本)上.
测试的尺寸包括:
- document.documentElement.clientWidth /Height
- document.body.clientWidth /Height
- window.innerWidth /Height
- window.outerWidth /Height
- screen.Width /Height
通过调整viewport的两个属性看尺寸是否有相应的变化, 一种scale为1.0:
<meta id="vp" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
另一种scale为0.5:
<meta id="vp" name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no">
下表中加粗标出了的尺寸.
| huawei chrome mobile | huawei 360 mobile | huawei QQ mobile browser | |
|---|---|---|---|
| scale = 1.0 | |||
| document.documentElement.clientW/H | 360 x 559 | 360 x 526 | 360 x 511 |
| document.body.clientW/H | 344 x 359 | 344 x 359 | 344 x 322 |
| window.innerW/H | 360 x 559 | 360 x 526 | 360 x 511 |
| window.outerW/H | 360 x 559 | 360 x 526 | 360 x 511 |
| screen.W/H | 360 x 640 | 360 x 640 | 360 x 640 |
| UA, scale=1 | Mozilla/5.0 (Linux; Android 4.4.2; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2913.5 Mobile Safari/537.36 | Mozilla/5.0 (Linux; Android 4.4.2; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.94 Mobile Safari/537.36 | Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36 |
| scale = 0.5 | |||
| document.documentElement.clientW/H | 720 x 1118 | 720 x 1052 | 720 x 1022 |
| document.body.clientW/H | 704 x 359 | 704 x 359 | 704 x 322 |
| window.innerW/H | 720 x 1118 | 720 x 1052 | 720 x 1022 |
| window.outerW/H | 360 x 559 | 360 x 526 | 360 x 511 |
| screen.W/H | 360 x 640 | 360 x 640 | 360 x 640 |
| UA, scale=0.5 | Mozilla/5.0 (Linux; Android 4.4.2; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2913.5 Mobile Safari/537.36 | Mozilla/5.0 (Linux; Android 4.4.2; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.94 Mobile Safari/537.36 | Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36 |
| huawei browser | huawei UC mobile | chrome desktop simulator galaxy s5 | |
|---|---|---|---|
| scale = 1.0 | |||
| document.documentElement.clientW/H | 360 x 508 | 360 x 518 | 360 x 640 |
| document.body.clientW/H | 344 x 325 | 344 x 318 | 344 x 310 |
| window.innerW/H | 360 x 508 | 360 x 518 | 360 x 640 |
| window.outerW/H | 720 x 1112 | 360 x 518 | 360 x 640 |
| screen.W/H | 720 x 1280 | 360 x 640 | 360 x 640 |
| UA, scale=1 | Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 MQQBrowser/5.3 Mobile Safari/537.36 | Mozilla/5.0 (Linux; U; Android 4.4.2; zh-CN; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.2214.89 UCBrowser/11.2.0.880 Mobile Safari/537.36 | Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36 |
| scale = 0.5 | |||
| document.documentElement.clientW/H | 720 x 1016 | 720 x 1036 | 720 x 1280 |
| document.body.clientW/H | 704 x 325 | 704 x 318 | 704 x 310 |
| window.innerW/H | 720 x 1016 | 720 x 1036 | 720 x 1280 |
| window.outerW/H | 720 x 1112 | 360 x 518 | 360 x 640 |
| screen.W/H | 720 x 1280 | 360 x 640 | 360 x 640 |
| UA, scale=0.5 | Mozilla/5.0 (Linux; U; Android 4.4.2; zh-cn; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 MQQBrowser/5.3 Mobile Safari/537.36 | Mozilla/5.0 (Linux; U; Android 4.4.2; zh-CN; CHM-UL00 Build/HonorCHM-UL00) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.2214.89 UCBrowser/11.2.0.880 Mobile Safari/537.36 | Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36 |
| chrome desktop | hongmi 1s UC 11.0.8 | hongmi 1s UC 11.2 | |
|---|---|---|---|
| scale = 1.0 | |||
| document.documentElement.clientW/H | 1920 x 990 | 360 x 518 | 360 x 518 |
| document.body.clientW/H | 1904 x 310 | 344 x 316 | 344 x 318 |
| window.innerW/H | 1920 x 990 | 360 x 518 | 360 x 518 |
| window.outerW/H | 1920 x 1080 | 720 x 1134 | 360 x 518 |
| screen.W/H | 1920 x 1080 | 720 x 1280 | 360 x 640 |
| UA, scale=1 | Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36 | Mozilla/5.0 (Linux; U; Android 4.4.4; zh-CN; HM 1S Build/KTU84P) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 UCBrowser/11.0.8.858 U3/0.8.0 Mobile Safari/534.30 | Mozilla/5.0 (Linux; U; Android 4.4.4; zh-CN; HM 1S Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.2214.89 UCBrowser/11.2.0.880 Mobile Safari/537.36 |
| scale = 0.5 | |||
| document.documentElement.clientW/H | 1920 x 990 | 360 x 518 | 720 x 1036 |
| document.body.clientW/H | 1904 x 310 | 344 x 316 | 704 x 318 |
| window.innerW/H | 1920 x 990 | 360 x 518 | 720 x 1036 |
| window.outerW/H | 1920 x 1080 | 720 x 1134 | 360 x 518 |
| screen.W/H | 1920 x 1080 | 720 x 1280 | 360 x 640 |
| UA, scale=0.5 | Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36 | Mozilla/5.0 (Linux; U; Android 4.4.4; zh-CN; HM 1S Build/KTU84P) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 UCBrowser/11.0.8.858 U3/0.8.0 Mobile Safari/534.30 | Mozilla/5.0 (Linux; U; Android 4.4.4; zh-CN; HM 1S Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/40.0.2214.89 UCBrowser/11.2.0.880 Mobile Safari/537.36 |
| iOS 10.1 iPhone5 safari | iOS 9.3.4 iPhone6 Safari | iOS 10.1 iPhone5 Wechat | |
|---|---|---|---|
| scale = 1.0 | |||
| document.documentElement.clientW/H | 320 x 460 | 375 x 559 | 320 x 504 |
| document.body.clientW/H | 304 x 440 | 359 x 440 | 304 x 440 |
| window.innerW/H | 640 x 920 | 375 x 559 | 320 x 504 |
| window.outerW/H | 0 x 0 | 0 x 0 | 0 x 0 |
| screen.W/H | 320 x 568 | 375 x 667 | 320 x 568 |
| UA, scale=1 | Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0 Mobile/14B100 Safari/602.1 | Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_4 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13G35 Safari/601.1 | Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Mobile/14B100 MicroMessenger/6.3.30 NetType/WIFI Language/zh_CN |
| scale = 0.5 | |||
| document.documentElement.clientW/H | 640 x 920 | 750 x 1118 | 640 x 1008 |
| document.body.clientW/H | 624 x 346 | 734 x 346 | 624 x 346 |
| window.innerW/H | 640 x 920 | 375 x 559 | 640 x 1007 |
| window.outerW/H | 0 x 0 | 0 x 0 | 0 x 0 |
| screen.W/H | 320 x 568 | 375 x 667 | 320 x 568 |
| UA, scale=0.5 | Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0 Mobile/14B100 Safari/602.1 | Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_4 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13G35 Safari/601.1 | Mozilla/5.0 (iPhone; CPU iPhone OS 10_1_1 like Mac OS X) AppleWebKit/602.2.14 (KHTML, like Gecko) Mobile/14B100 MicroMessenger/6.3.30 NetType/WIFI Language/zh_CN |
上表中有一个现象是, iphone5 safari中的小时高度是最小的, 只有460. iphone6 换算为320宽度时, 高度为477.
使用了weinre进行测试. 通过width()函数输出到console, 测试的页面如下:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta id="vp" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="http://192.168.0.143:8888/target/target-script-min.js"></script>
</head>
<body>
<button style="font-size: 50px" onclick="width()">width</button>
<script type="text/javascript">
function changevp(scale) {
document.getElementById("vp").setAttribute("content", "width=device-width, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no")
}
function getOutput(scale) {
return document.documentElement.clientWidth + " x " + document.documentElement.clientHeight + "\t: document.documentElement.clientW/H\n" +
document.body.clientWidth + " x " + document.body.clientHeight + "\t: document.body.clientW/H\n" +
window.innerWidth + " x " + window.innerHeight + "\t: window.innerW/H\n" +
window.outerWidth + " x " + window.outerHeight + "\t: window.outerW/H\n" +
screen.width + " x " + screen.height + "\t: screen.W/H\n" +
navigator.userAgent + "\t: UA, scale=" + scale
}
function width() {
var scale = 1
changevp(scale)
var str = getOutput(scale)
console.log(str)
var scale = 0.5
changevp(scale)
var str = getOutput(scale)
console.log(str)
}
</script>
</body>
</html>