jQuery(window).height() doesn't work on mobile browsers

问题

I have a full page slideshow using jQuery(window).height() and it works fine on most browsers, however I checked it out on my phone (Android Browser & Dolphin) and the slideshow just keeps growing endlessly, well beyond the height of the view-port. This is my code:

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);
    });
});

Any ideas what could be causing it?

Thanks.

回答1:

so after 3 year of this question asked jquery window height still not working in mobile devices just replace jquery with javascript and it worked for me.

replace jquery

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

with javascript

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

回答2:

If a HTML document doesn't have DOCTYPE declaration, then it’s not valid HTML. JQuery cannot calculate window height / document height correctly if doctype is not specified on window.

The declaration is an instruction to the web browser about what HTML version is being used in your page.

So in case you haven't specified it,add DOCTYPE declaration to your HTML page and see the output.

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

回答3:

There might be a problem with the html document types. Here is the example document type for mobile devices. Change this in your code and try.

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

Refer below link more details. http://www.microsoft.com/en-GB/developers/articles/jquery-mobile-101

来源：https://stackoverflow.com/questions/14094890/jquerywindow-height-doesnt-work-on-mobile-browsers

标签

javascript

jquery

mobile

viewport