iPad端Chrome新标签页打开页面时window.height值异常问题

问题原因 #

Chrome在iPad上通过target="_blank"打开新标签页时，$(document).ready()的触发时机早于浏览器完全渲染页面工具栏（地址栏、标签栏）的时机，此时计算的窗口高度包含了工具栏未展开时的额外空间；而在当前标签页（_self）打开时，浏览器已完成工具栏渲染，高度计算准确。这是Chrome移动端特有的布局渲染时序问题，Safari的渲染机制不存在该差异。

解决方案 #

以下几种方法可解决该高度异常问题：

1. 等待页面完全加载后获取高度 #

替换$(document).ready()为window.onload，确保所有页面元素与浏览器布局均完成：

window.onload = function() {
    var heightWin = $(window).height();
    alert('Win height: ' + heightWin);
};

2. 使用原生API替代jQuery方法 #

原生document.documentElement.clientHeight能更准确获取视口高度，避免jQuery封装可能带来的时序问题：

window.onload = function() {
    var heightWin = document.documentElement.clientHeight;
    alert('Win height: ' + heightWin);
};

3. 延迟执行高度计算 #

利用requestAnimationFrame让浏览器在下一帧布局完成后再计算高度：

$(document).ready(function() {
    requestAnimationFrame(function() {
        var heightWin = $(window).height();
        alert('Win height: ' + heightWin);
    });
});

4. 监听窗口resize事件（可选） #

若需处理后续窗口大小变化（如工具栏隐藏/显示），可添加resize监听：

function getWindowHeight() {
    var heightWin = document.documentElement.clientHeight;
    alert('Win height: ' + heightWin);
}

window.onload = getWindowHeight;
window.addEventListener('resize', getWindowHeight);

内容的提问来源于stack exchange，提问作者Nguyen Xuan Nghia