none
Webinhalt skaliert nicht (oder nicht richtig ) auf SmartPhone RRS feed

  • Frage

  • Hallo,

    der Inhalt eines iFrames

      <iframe  
        marginheight="0" 
        marginwidth="0" 
        frameborder="0" 
        scrolling="no" 
        src="http://www.wetteronline.de/cgi-bin/hpweather?PLZ=23966&amp;FORMAT=long&amp;MENU=dropdown&amp;MAP=rainradar" 
        width="158px" 
        height="271px"
        style="zoom:400%;"
      >
    </iframe>
    

    wird im IE10 auf Laptop durch zoom ordentlich vergrößert, beim Aufruf der Webseite mit dem IE oder auch Chrom (Galaxy S4) ist die Darstellung wie ohne zoom.

    IE-Einstellungen:

    Erweitert-Seiten autom. anpassen: aus

    Eingabehilfe-Zoomen erzwingen: aus

    Hat jemand eine Idee?

    Gruß Tom

    Sonntag, 20. September 2015 18:58

Antworten

  • Hi,

    meist kommen solche Probleme vom HTML Inhalt der eingebundenen Seite. Wird die denn skaliert, wenn Du sie manuell in deinem Smartphone aufrufst? (Also nicht im IFrame eingebunden, sondern Standalone)

    zoom sollte man zudem gar nicht erst verwenden, da es in der Regel gar nicht oder nur teilweise funktioniert. Insbesondere bei komplexeren Seiten gibt es erhebliche Darstellungsprobleme, nicht nur im Internet Explorer. Siehe dazu:

      http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/äußere_Gestaltung/zoom


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    • Als Antwort markiert tom krist Montag, 21. September 2015 17:18
    Montag, 21. September 2015 07:04
  • Hallo Tom,

    da dein Skript direkt ausgeführt wird und nicht erst dann, wenn die Seite inkl. aller Inhalte vollständig geladen wird, kann es schon sein, dass mal diese und mal jene Werte angezeigt werden. Denn durch das Laden der weiteren Inhalte kann es sein, dass die Werte sich verändern (bspw. kann ja ein Bild ohne Größenangabe mit 1000px Breite geladen werden, dann muss das Device entsprechend skalieren)

    Pack den Code mal in eine Methode und ruf die im onload Event des body Tags auf.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    • Als Antwort markiert tom krist Samstag, 26. September 2015 17:29
    Samstag, 26. September 2015 11:42

Alle Antworten

  • Hi,

    meist kommen solche Probleme vom HTML Inhalt der eingebundenen Seite. Wird die denn skaliert, wenn Du sie manuell in deinem Smartphone aufrufst? (Also nicht im IFrame eingebunden, sondern Standalone)

    zoom sollte man zudem gar nicht erst verwenden, da es in der Regel gar nicht oder nur teilweise funktioniert. Insbesondere bei komplexeren Seiten gibt es erhebliche Darstellungsprobleme, nicht nur im Internet Explorer. Siehe dazu:

      http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/äußere_Gestaltung/zoom


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    • Als Antwort markiert tom krist Montag, 21. September 2015 17:18
    Montag, 21. September 2015 07:04
  • Hallo Stefan,

    habe Deinen Vorschlag aufgegriffen. Klappt soweit auf allen Geräten.

    Danke Dir.

    Gruß Tom

    Montag, 21. September 2015 18:18
  • Hallo Stefan,

    habe noch eine kurze Nachfrage.

    Mit

    <body>
        <iframe id="ifr" 
           src="http://www.wetteronline.de/cgi-bin/hpweather?PLZ=23966&amp;FORMAT=long&amp;MENU=dropdown&amp;MAP=rainradar" >
        </iframe>
        <script type="text/javascript">
            var sc = Math.floor( window.innerWidth / 180); //feste Breite von iFrame 180px
            // top = 10 + h/2 (scale -1 )
            document.getElementById("ifr").style.top = (10 + 145 * (sc - 1)) + "px";
            document.getElementById("ifr").style.transform = ("scale(" + sc + ")");
            document.getElementById("ifr").style.WebkitTransform = ("scale(" + sc + ")");
            document.write("h: " + window.innerHeight + "<br>" + "b: " + window.innerWidth + "<br>" + "s: " + sc);
        </script>
    
    </body>
    
    möchte ich den Bildschirm von kleinen Geräten bestmöglich nutzen. Allerdings ist mir beim Testen, ob hochkant Breite = quer Höhe ist, aufgefallen, dass gelegentlich abweichende Pixelzahlen durch innerWidth und innerHeight geliefert werden:

    hochkant:

    Höhe - Breite

    567 - 360

    991 - 629

    1544 - 980

    dazu quer

    440 - 980

    alles am gleichen Gerät, Galaxy S4, Browser IE.

    Gibt es dafür eine sachliche Erklärung?

    Gruß Tom

    Freitag, 25. September 2015 19:41
  • Hallo Tom,

    wenn das immer auf der gleichen Seite passiert und sich _kein_ Element dort geändert hat (eingebundene Grafiken, Texte, ...) ist das zwar merkwürdig aber so genau hab ich nicht verstanden, warum Du das überhaupt brauchst.

    Falls Du ein responsives Layout integrieren willst, arbeite mit CSS Media Queries.

      http://wiki.selfhtml.org/wiki/CSS/Media_Queries

      https://www.google.de/?gws_rd=ssl#q=media+queries

    Zudem würde ich überlegen, jQuery in deine Anwendung zu integrieren, um eine erheblich bessere Browserkompatibilität zu erreichen.

      http://jquery.com/

    Hier findest Du noch eine gute Erklärung, was es mit width, height, innerWidth, innerHeight, ... auf sich hat und wie diese Werte berechnet werden. Evtl. erklären sich dadurch die unterschiedlichen Werte.

      http://stackoverflow.com/questions/17845027/what-is-difference-between-width-innerwidth-and-outerwidth-height-innerheight


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    Samstag, 26. September 2015 07:06
  • Moin Stefan, diese Seite ist hauptsächlich für mich bestimmt, damit ich mir die Wetterdaten und v.a. das Regenradarbild nicht mehr von den Wetterdatenanbietern holen muss, die die Darbietung von Informationen nebenrangig zu Werbung und Boulevard-Geschwätz betrachten. Die Seite soll, da im Original zu klein auf einem Smartphone an das jeweilige Endgerät zur Laufzeit angepasst werden, möchte dabei auch keinen großen Aufwand betreiben, wobei ich aber finde, dass meine responsive Lösung doch elegant ist. Merkwürdig finde ich aber, dass ein und derselbe Aufruf der gleichen Seite mit dem gleichen Gerät diese Werte und eine Minute später jene Werte liefert und ich möglicherweise mehrfach aktualisieren muss, bis die Seite entsprechend skaliert ist. Dieses Verhalten habe ich bisher nur dann wahrnehmen müssen, wenn ich das Gerät hochkant halte. Bei quer wurden mir bisher immer die gleichen Werte angezeigt, die Skalierung war hier immer optimal. Irgendwo las ich, ohne dies weiter beachtet zu haben, da ich auch kein I-Phone habe, dass das I-Phone falsche Werte zu innerWidth liefert (womöglich immer gleich falsch?!). Fand ich beim Lesen aber bereits merkwürdig. Und nun das mit nem Galaxy. Vielleicht kann Du ja die Seite selbst einmal aufrufen, hier ist die Adresse easyO.de/apps/wetter.html Gruß Tom
    Samstag, 26. September 2015 11:19
  • Hallo Tom,

    da dein Skript direkt ausgeführt wird und nicht erst dann, wenn die Seite inkl. aller Inhalte vollständig geladen wird, kann es schon sein, dass mal diese und mal jene Werte angezeigt werden. Denn durch das Laden der weiteren Inhalte kann es sein, dass die Werte sich verändern (bspw. kann ja ein Bild ohne Größenangabe mit 1000px Breite geladen werden, dann muss das Device entsprechend skalieren)

    Pack den Code mal in eine Methode und ruf die im onload Event des body Tags auf.


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    • Als Antwort markiert tom krist Samstag, 26. September 2015 17:29
    Samstag, 26. September 2015 11:42
  • Klingt logisch, insbesondere wenn man innerWidth als Breite des Viewports und nicht des Screens ansieht, so wie ich es bisher fälschlicherweise betrachtet habe.

    Danke Dir, ein schönes WE.

    Gruß Tom

    Samstag, 26. September 2015 17:36