Ankündigung

Einklappen
Keine Ankündigung bisher.

iPhone im Responsive HTML-Block-Problem

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • iPhone im Responsive HTML-Block-Problem

    Hellas,
    ich hoffe das Thema passt in die Abteilung "HTML, Usability und Barrierefreiheit", weil eigentlich hat es mehr mit einem Bug im iPhone zu tun, welcher aber durch das Responsive Design passiert.

    Den HTML und CSS-Code erspare ich euch, da dieser extrem lang ist und wahrscheinlich auch gar nicht benötigt wird um das Problem zu lösen.

    Folgende Sachlage:
    Ich habe einige Regeln mit "@media" definiert. Und leider muss ich auch per JavaScript ein paar Elemente (jQuery) umstellen, damit meine Darstellung sauber aussieht. Das meiste ist mit "display:block/none" und "height:0" sowie "overflow:hidden" gemacht. (Randbemerkung: und mit "speak:none/normal" damit es wirklich Barrierefrei ist).
    In jedem Browser funktioniert alles so wie es sein soll. Wirklich in jedem? Nein. Ein kleiner Browser names Safari am iPhone leistet den Römern...äh..mir widerstand.
    Ein Block (in dem das Menü versteckt wird) hat am iPhone direkt nach dem laden eine Höhe. Das ist deswegen blöd, weil ein weißer großer Kasten über dem Inhalt entsteht. Laut CSS-Definition ist das Ding aber "display:none" und "height:0"! Wenn ich jetzt das iPhone einmal drehe (ins Querformat) und dann wieder zurück drehe (ins Hochformat), dann stimmt die Darstellung plötzlich. Das mysteriöse DIV ist plötzlich (wie in CSS definiert) verschwunden.

    Ich hab mir einen iPhone-Simulator von Apple heruntergeladen (ein Hoch auf Apple-XCode) und dort getestet. Und da tritt das Problem nicht auf. Ich habe andere Handys und Browser getestet, alles normal: Das DIV ist von Anfang an nicht da.
    Und da hab ich jetzt mein Problem.

    Mein erster Ansatz war, einfach gelegentlich mal ein RESIZE-Event durch den Browser zu schicken. Problem nicht gelöst. DIV-Block bleibt am iPhone bestehen.
    Mein zweiter Ansaz war, per JavaScript nachträglich das "display:none" und die "height:0" noch inline ins Element zu schreiben. Problem nicht gelöst. DIV-Block bleibt am iPhone bestehen.

    Mein dritter Ansatz wäre jetzt, dem iPhone vorzugauckeln, das sich Querformat/Hochformat geändert hat. Darüber finde ich aber kein Event, bzw. eigentlich nur das RESIZE-Event.

    Und daher jetzt mein Hilferuf an euch. Jemand eine Idee/Erfahrungen/Ansatz?


  • #2
    Einen konkreten Ansatz nicht, aber du kannst Deinen iOS-Safari auf einem Mac debuggen, wenn du das Gerät mit dem Mac verbunden hast.

    https://appletoolbox.com/use-web-ins...mobile-safari/

    Vielleicht siehst du dort weshalb der Block zu Beginn erscheint.

    Kommentar


    • #3
      Danke für den Hinweis. Ich hatte vergessen zu sagen, dass wirklich niemand in meinem Umfeld im Besitz eines Macs ist. Den Link hatte ich auch schon gefunden. Und Safari auf Windows kann das leider nicht (schon versucht). Die Funktionen zum koppeln des Geräts gibt es im Windows-Safari nicht.

      Kommentar


      • #4
        Yep, funktioniert nur am Mac. Die wollen ja ihre Geräte verkaufen.

        Wenn du eine URL hättest und die mir per pn zur Verfügung stellen möchtest könnte ich heute Abend kurz nachschauen ob mir gerade schnell etwas auffällt.

        Kommentar


        • #5
          Danke für das Angebot. Allerdings handelt es sich um ein Intranet, welches nach außen hin abgeschottet ist.
          Ich würde jetzt ein bisschen warten, ob noch jemand noch eine Idee hat, bevor ich das ganze auf einen öffentlichen Test-Server ziehe.

          Kommentar


          • #6
            Zitat von alf4712 Beitrag anzeigen
            Danke für den Hinweis. Ich hatte vergessen zu sagen, dass wirklich niemand in meinem Umfeld im Besitz eines Macs ist. Den Link hatte ich auch schon gefunden. Und Safari auf Windows kann das leider nicht (schon versucht). Die Funktionen zum koppeln des Geräts gibt es im Windows-Safari nicht.
            kann du dir kein macos in eine viruaelle maschine installieren ?

            Kommentar


            • #7
              Zitat von alf4712 Beitrag anzeigen
              Den HTML und CSS-Code erspare ich euch
              Dann reduziert man das Problem auf ein paar Zeilen oder baut ein fiddle. Diese Geheimniskrämerei ist doch lächerlich.

              Kommentar


              • #8
                Die Anfrage ist wage. Erinnert mich an die vielen Momente, wo ich bei der Fehlersuche einfach an der falschen Stelle gesucht habe.

                Wenn die Nicht-Sichtbarkeit nur an die Ausrichtung "portrait" gebunden ist, kannst Du ja vielleicht einen Default-Style definieren, der gilt bevor portrait/landscape gewürdigt wird?!
                Es ist schon alles gesagt. Nur noch nicht von allen.

                Kommentar

                Lädt...
                X