jQuery / JS，iOS 4和$（文档）.height（）问题

本文介绍了jQuery / JS，iOS 4和$（文档）.height（）问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到了一个奇怪的问题，似乎是各种版本的Webkit浏览器。我试图将一个元素放在屏幕的中心并进行计算，我需要获得各种尺寸，特别是身体的高度和屏幕的高度。在jQuery我一直在使用：

I've run into an odd issue with what appears to be various versions of Webkit browsers. I'm trying to position an element on the center of the screen and to do the calculations, I need to get various dimensions, specifically the height of the body and the height of the screen. In jQuery I've been using:

var bodyHeight = $('body').height();
var screenHeight = $(window).height();

我的页面通常比实际视口高很多，所以当我'警告'那些变量时，bodyHeight应该最终变大，而screenHeight应该保持不变（浏览器视口的高度）。

My page is typically much taller than the actual viewport, so when I 'alert' those variables, bodyHeight should end up being large, while screenHeight should remain constant (height of the browser viewport).

这是真的
- Firefox
- Chrome 15（哇！Chrome什么时候进入15版？）
- iOS5上的Safari

This is true in - Firefox - Chrome 15 (whoa! When did Chrome get to version 15?) - Safari on iOS5

这不适用于：
- iOS4上的Safari
- Safari 5.0.4

This is NOT working in: - Safari on iOS4 - Safari 5.0.4

在后两者中， $（窗口）.height（）; 总是返回与 $（'body'）相同的值.height（）

On the latter two, $(window).height(); always returns the same value as $('body').height()

认为它可能是一个jQuery问题，我换掉了 window.outerHeight 的窗口高度，但这也做了同样的事情，让我觉得这实际上是某种webkit问题。

Thinking it was perhaps a jQuery issue, I swapped out the window height for window.outerHeight but that, too, does the same thing, making me think this is actually some sort of webkit problem.

有没有人碰到这个并知道解决这个问题的方法？

Has anyone ran into this and know of a way around this issue?

为了使事情变得复杂，我似乎无法孤立地复制它。例如：工作正常。

To complicate things, I can't seem to replicate this in isolation. For instance: http://jsbin.com/omogap/3 works fine.

我已经确定这不是一个CSS问题，所以也许还有其他JS对我需要找到的特定浏览器造成严重破坏。

I've determined it's not a CSS issue, so perhaps there's other JS wreaking havoc on this particular browser I need to find.

推荐答案

我很长时间以来都在争吵（因为）我找到了如何在Mobile Safari中获得适当高度的窗口的方法。

I've been fighting with this for a very long time (because of bug of my plugin) and I've found the way how to get proper height of window in Mobile Safari.

无论什么缩放级别没有减去屏幕的高度（将来可能会改变）。它适用于iOS6全屏模式。

It works correctly no matter what zoom level is without subtracting height of screen with predefined height of status bars (which might change in future). And it works with iOS6 fullscreen mode.

一些测试（在横屏模式下屏幕尺寸为320x480的iPhone上）：

Some tests (on iPhone with screen size 320x480, in landscape mode):

// Returns height of the screen including all toolbars
// Requires detection of orientation. (320px for our test)
window.orientation === 0 ? screen.height : screen.width


// Returns height of the visible area
// It decreases if you zoom in
window.innerHeight


// Returns height of screen minus all toolbars
// The problem is that it always subtracts it with height of the browser bar, no matter if it present or not
// In fullscreen mode it always returns 320px.
// Doesn't change when zoom level is changed.
document.documentElement.clientHeight

以下是检测高度的方式：

Here is how height is detected:

var getIOSWindowHeight = function() {
    // Get zoom level of mobile Safari
    // Note, that such zoom detection might not work correctly in other browsers
    // We use width, instead of height, because there are no vertical toolbars :)
    var zoomLevel = document.documentElement.clientWidth / window.innerWidth;

    // window.innerHeight returns height of the visible area.
    // We multiply it by zoom and get out real height.
    return window.innerHeight * zoomLevel;
};

// You can also get height of the toolbars that are currently displayed
var getHeightOfIOSToolbars = function() {
    var tH = (window.orientation === 0 ? screen.height : screen.width) -  getIOSWindowHeight();
    return tH > 1 ? tH : 0;
};

这种技术只有一个骗局：当页面放大时，它不是像素完美的（因为 window.innerHeight 始终返回舍入值）。当您在顶部栏附近放大时，它也会返回不正确的值。

Such technique has only one con: it's not pixel perfect when page is zoomed in (because window.innerHeight always returns rounded value). It also returns incorrect value when you zoom in near top bar.

自你问这个问题一年过去了，但无论如何希望这会有所帮助！：）

One year passed since you asked this question, but anyway hope this helps! :)

这篇关于jQuery / JS，iOS 4和$（文档）.height（）问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！