wake-up-neo.net

iphone/ipad löst unerwartete Ereignisse zur Größenänderung aus

Ich arbeite an einer mobilen Version meiner Website. Ich verwende Medienabfragen und CSS so viel wie möglich, aber ich verwende auch etwas Javascript, um beispielsweise meine Navigation in eine Minimier-/Erweiterungsliste auf kleineren Geräten umzuwandeln, um Platz zu sparen.

Um all dies zu bewältigen, habe ich versucht, das window.resize -Ereignis zu verwenden. Dies lässt die Magie auf Desktop-Browsern passieren, während deren Größe geändert wird. Ich erhalte jedoch Größenänderungsereignisse auf dem iPad/iPhone, wenn ich sie nicht erwarte.

Bei Desktop-Browsern erhalte ich nur dann ein Größenänderungsereignis, wenn ich die Fenstergröße tatsächlich verändere. Bei mobilen Browsern erhalte ich das Größenänderungsereignis, wenn ich die Ausrichtung ändere (erwartet), aber ich bekomme es auch, wenn ich etwas ein-/ausblenden möchte.

Hier ist ein einfaches Beispiel:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Resize test</title>
<style>
.box {height: 10000px; background: green; display: none;}
</style>
<script>
$(function(){
    $(".opener").click(function(){
        $(".box").slideToggle();
    });
    $(window).resize(function(){
        alert("resized");
    });
});
</script>
</head>

<body>
<a href="#" class="opener">Open/close me</a>
<div class="box"></div>
</body>
</html>

Wenn Sie in einem Desktop-Browser auf den Link klicken, wird keine Warnung angezeigt. Klicken Sie auf den Link auf dem iPhone/iPad. Sie erhalten die Warnmeldung. Was ist das Problem?

javascriptjqueryiphonecssmobile
45
rdoyle720

Speichern Sie die Fensterbreite und prüfen Sie, ob sie sich tatsächlich geändert hat, bevor Sie mit Ihrer $(window).resize-Funktion fortfahren:

jQuery(document).ready(function($) {

    // Store the window width
    var windowWidth = $(window).width();

    // Resize Event
    $(window).resize(function(){

        // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
        if ($(window).width() != windowWidth) {

            // Update the window width for next time
            windowWidth = $(window).width();

            // Do stuff here

        }

        // Otherwise do nothing

    });

});
104
James Greig

Hier ist die Vanilla-Javascript-Version der akzeptierten Antwort

document.addEventListener('DOMContentLoaded', function() {

    // Store the window width
    var windowWidth = window.innerWidth

    // Resize Event
    window.addEventListener("resize", function() {

        // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
        if (window.innerWidth != windowWidth) {

            // Update the window width for next time
            windowWidth = window.innerWidth

            // Do stuff here

        }

        // Otherwise do nothing
    })

})
2
Brian Jacobs

Ich musste eine Breite angeben:

   <meta name="viewport" content="width=1000, initial-scale=1.0, user-scalable=yes">

Styles:

html, body
{
       height:100%;
       width:100%;
       overflow:auto;
}
2
Kees C. Bakker

Ist die Annahme falsch, dass Sie nur die Auswirkungen des Größenänderungsereignisses auf ein Gerät ohne Berührung haben möchten? Wenn ja, dann können Sie Modernizr einfach verwenden und prüfen: 

    $(window).resize(function(e){
       if(Modernizr.touch) {
         e.preventDefault();
       }
    });
1
Felix

Ich fand die Antwort in StackOverflow selbst link der Lösung . Es ist die Antwort von sidonaldson, die mir geholfen hat, ein Problem zu lösen, mit dem ich früher konfrontiert war. ty

die Antwort ist:

var cachedWidth = $(window).width();
    $(window).resize(function(){
        var newWidth = $(window).width();
        if(newWidth !== cachedWidth){
            //DO RESIZE HERE
            cachedWidth = newWidth;
        }
    });
1
weBBer

@ 3Streifen hat die richtige Antwort.

Dies ist nur eine geringfügige Modifikation, die es effizienter macht, indem das Fensterobjekt zwischengespeichert wird, anstatt jQuery wiederholt zu instanziieren (denken Sie daran, dass das resize-Ereignis bei einer tatsächlichen Größenänderung schnell aufgerufen werden kann).

jQuery(document).ready(function($) {

    // Cached window jQuery object
    var $window = $(window);

    // Store the window width
    var windowWidth = $window.width();

    // Resize Event
    $window.resize(function(){

        // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
        if ($window.width() != windowWidth) {

            // Update the window width for next time
            windowWidth = $window.width();

            // Do stuff here

        }

        // Otherwise do nothing

    });

});
0
anthonygore

Es fühlt sich hart an, die Fenstergröße zu überprüfen, um zu sehen, ob sie geändert wurde. Verwenden Sie stattdessen die Ressourcen, die Ihnen jQuery bietet!

Im Ereignishandler können Sie das Feld target des jQuery-Ereignisses überprüfen, das immer auf das DOM-Element gesetzt ist, von dem das Ereignis ausgeht. Wenn der Benutzer die Größe des Fensters ändert, wird target das Fenster sein. Wenn der Benutzer #someDiv ändert, ist target der #someDiv.

$(window).on('resize', function(event) {
    if ($(event.target).is($(window))) {
       doTheThing();
    }
});
0
MegaMatt

Prüfen Sie, ob Sie den HTML-Body-Wrapper explizit durchlaufen, um die Adressleiste beim Laden der Seite auszublenden.

0
Abhidev