jQuery(window).height() 在移动浏览器上不起作用答案

【问题标题】：jQuery(window).height() doesn't work on mobile browsersjQuery(window).height() 在移动浏览器上不起作用
【发布时间】：2012-12-30 21:34:41
【问题描述】：

我有一个使用 jQuery(window).height() 的整页幻灯片，它在大多数浏览器上都可以正常工作，但是我在我的手机（Android 浏览器和 Dolphin）上查看了它，幻灯片一直在不断增长，远远超出视口的高度。这是我的代码：

var height = jQuery(window).height();
jQuery('.slide').each(function(index, element) {
    if(height > 600) jQuery(this).height(height);
    else jQuery(this).height(600);
});
jQuery(window).on('resize orientationChanged', function() {
    jQuery('.slide').each(function(index, element) {
        if(height > 600) jQuery(this).height(height);
        else jQuery(this).height(600);
    });
});

任何想法可能导致它？

谢谢。

【问题讨论】：

在我看来页面缩放的问题。我有同样的问题stackoverflow.com/questions/24395513/…
我的问题与无法扩展的响应式网站不同。

标签： javascript jquery mobile viewport

【解决方案1】：

所以在这个问题问了 3 年后，jquery 窗口高度仍然无法在移动设备上运行，只需将 jquery 替换为 javascript，它就对我有用。

替换jquery

var bodyh = jQuery("body").height();
var windowh = jQuery(window).height();

使用 javascript

 var bodyh = document.body.clientHeight;
 var windowh = window.innerHeight;

【讨论】：

【解决方案2】：

如果 HTML 文档没有 DOCTYPE 声明，则它不是有效的 HTML。如果没有在窗口上指定 doctype，则 JQuery 无法正确计算窗口高度/文档高度。

声明是对网络浏览器的指示，说明您的页面中使用的 HTML 版本。

因此，如果您没有指定它，请将 DOCTYPE 声明添加到您的 HTML 页面并查看输出。

<!DOCTYPE HTML>
<html>
   //...
</html>

【讨论】：

不，文档类型已声明。就像我说的那样，这仅在发生这种情况的股票 Android 浏览器和 Dolphin 上......

【解决方案3】：

html 文档类型可能存在问题。这是移动设备的示例文档类型。在您的代码中更改它并尝试。

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page name</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">

请参阅下面的链接更多详细信息。 http://www.microsoft.com/en-GB/developers/articles/jquery-mobile-101

【讨论】：

正如我在帖子的评论中所说，它是一个无法缩放的响应式网站，即声明了视口。