// 显示器的宽高像素
screen.height
screen.width

//HTML的可视宽高像素，不是物理像素，是缩放后视口viewport 的显示像素，随着视口的缩放而改变
document.documentElement.clientHeight
document.documentElement.clientWidth

//HTML的<body>的可视宽高像素，不是物理像素，是缩放后视口viewport 的显示像素，随着视口的缩放而改变，chrome默认有8px的margin，所以默认要比上面的documentElement窄
document.documentElement.clientHeight
document.documentElement.clientWidth

//窗体的可视宽高像素，会保留前一个页面的视口缩放比，如果前一个页面视口缩放了，此数值也会缩放
window.innerWidth
window.innerHeight

// 在华为内置浏览器上, screen.width显示与其他浏览器表现不同, 其他浏览器为虚拟尺寸, 并且所有其他显示都基于虚拟尺寸, 华为是实际尺寸, 而显示却基于虚拟尺寸.
// 导致华为浏览器缩放不准确. 需要用window.innerWidth替代. 而window.innerWidth是随着initial-scale变化的.

//旧代码在华为上出问题:

if (window.innerWidth != width) {
alert(width + " " + window.innerWidth)
document.getElementById("metavp").content = "width=" + width + ",initial-scale=" + screen.width / width + ", maximum-scale=" + screen.width / width + ", user-scalable=no"
}

//改为如下代码才正常

if (window.innerWidth != width) {
alert(width + " " + window.innerWidth)
document.getElementById("metavp").content = "width=" + width + ",initial-scale=" + window.innerWidth / width + ", maximum-scale=" + window.innerWidth / width + ", user-scalable=no"
}

标签: none 阅读量: 1004

添加新评论