jQuery/JS, iOS 4 und $(document).Höhe() Probleme

Ich ve wurde kämpfen mit diesem für eine sehr lange Zeit (wegen bug von meinem plugin) und ich habe den Weg gefunden, wie man die richtige Höhe der Fenster in Mobile Safari.

Funktioniert es einwandfrei, egal welche zoom-Stufe ist ohne die Subtraktion der Höhe der Bildschirm mit vordefinierten Höhe des status-bars (das könnte sich in Zukunft ändern). Und es funktioniert mit iOS6 fullscreen-Modus.

Einige tests (auf dem iPhone mit der Display-Größe (320 × 480), im landscape-Modus):

//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 

Hier ist, wie Höhe festgestellt wird:

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

Solche Technik hat nur einen Nachteil: es ist nicht pixel perfekt, wenn die Seite vergrößert ist (weil window.innerHeight gibt immer gerundeter Wert). Es gibt auch falschen Wert wenn Sie den zoom in der Nähe der oberen Leiste.

Ein Jahr vergangen, seit du diese Frage gestellt, aber trotzdem hoffe, das hilft! 🙂

InformationsquelleAutor Dmitry Semenov

Ich hatte ein ähnliches problem. Es hatte zu tun mit 2 Sache:

Box-sizing CSS3-Eigenschaft:
In der .Höhe() jQuery-Dokumentation fand ich dies:

Beachten Sie, dass .Höhe() wird immer wieder die content-Höhe unabhängig vom Wert des CSS box-sizing-Eigenschaft. Wie von jQuery 1.8, das kann erfordern das abrufen der CSS-Höhe plus-box-sizing-Eigenschaft und dann subtrahieren potenzielle border und padding auf jedes element, wenn das element hat box-sizing: border-box. Um diesen Nachteil zu vermeiden, verwenden Sie .css( "height" ) statt .Höhe().

Dies können $('body').height().

Dokument bereit, vs Fenster.laden

$(document).ready() wird ausgeführt wenn das DOM bereit ist, für die JS, aber es ist möglich, dass die Bilder noch nicht fertig geladen ist doch. Mit $(window).load() behoben mein problem. Lesen Sie mehr.

Ich hoffe, das hilft.

InformationsquelleAutor El Cultivo

Cross-browser-Lösung ist festgelegt, dass durch jQuery

Diese Eigenschaft verwenden:
$(window).height()

Dieser Rückgabewert ein int-Wert, repräsentiert die Größe der sichtbaren Höhe des browser in Pixel.

InformationsquelleAutor gsubiran