Viewport passende Bildschirmbreite und große Bilder

Ich versuche, eine WebView zu verwenden, um ein großes Bild mit dem eingebauten Multitouch anzuzeigen und zu versuchen, Speicherabstürze zu vermeiden.

Ich setze das WebView auf diese Weise:

  • Wie finde ich die maximale Texturgröße für verschiedene Telefone?
  • Unterschied zwischen R.layout und android.R.layout
  • Fehler beim Öffnen der HPROF-Datei
  • Kann nicht finden android.support.design.widget.Snackbar in Support-Design-Bibliothek
  • Was sind die Vorteile der Einstellung von bigHeap auf true?
  • Actionbar Menüpunkt onclick?
  • setInitialScale(20); WebSettings settings = getSettings(); settings.setJavaScriptEnabled(true); settings.setUseWideViewPort(true); settings.setLoadWithOverviewMode(true); settings.setSupportZoom(true); settings.setBuiltInZoomControls(true); 

    Und laden Sie den folgenden Code:

     <head> <meta name="viewport" content="width=device-width, user-scalable=yes" /> </head> <body style="margin: 0; padding: 0"> <img alt="image" src="THE_SRC_GOES_HERE" id="theImage" > </body> 

    Das Problem ist, dass, wenn es ein mittleres Bild lädt (zB 1600×1200), es funktioniert nett und das Bild passt auf die Bildschirmbreite.

    Bildbeschreibung hier eingeben

    Aber wenn das Bild größer ist 7300×5200 in meinem Beispiel, es scheint wie gezoomt und mit dem Zoom aus deaktiviert.

    Bildbeschreibung hier eingeben

    Wenn du die Bilder testen möchtest:

    Img1 & img2

    HINWEIS: Ich bin nicht der Besitzer dieser Bilder und ich benutze es nur zum Testen

  • 9-Patch-Bildfehler in Android
  • Testen von In-App-Abrechnung: "Der Publisher kann diesen Artikel nicht erwerben"
  • Der Logging-Tag kann höchstens 23 Zeichen lang sein
  • Android: Erstellen Sie Spinner programmgesteuert aus Array
  • Android App nicht kompatibel mit Geräten, die Google Play abgeben
  • Konvertieren Sie Xamarin.Forms.Color auf Plattform spezifische Farbe
  • 5 Solutions collect form web for “Viewport passende Bildschirmbreite und große Bilder”

    Ich denke, deine Bilder sind immer noch größer als das Viewport. Versuche dies

     <html> <head> <meta name="viewport" content="width=device-width, user-scalable=yes" /> </head> <body style="margin: 0; padding: 0"> <img alt="image" src="http://www.deviantart.com/download/165022929/Wallpaper_2010_by_scrumen.png" id="theImage" style="width:100%" > </body> </html> 

    Ich weiß nicht die richtige Antwort, aber ein möglicher Walkarround könnte die img max-width auf einen "nicht-sehr hohen Wert" gesetzt werden, zB 2 * screen.width, wenn die Seite geladen wird

    Ich habe das eigentlich auf ICS gearbeitet, indem du etwas ein bisschen intuitiv gemacht hast. Während andere vorschlagen, style="width:100%" zum img Tag hinzuzufügen, soll meine Lösung eigentlich style="height:100%" .

    Dies funktioniert für mich auf meinem Android 4.0+ Geräte, aber leider beginnt es teilweise vergrößert (so die Bildhöhe füllt die Ansicht) auf meine älteren Geräte.

    1. Es vermeidet das Leerraumproblem auf allen Geräten, die ich getestet habe.
      • ICS zeigt Platz auf der ersten vollvergossenen Ansicht, aber beim Zoomen verschwindet es genau so, wie du willst.
      • Bei älteren Geräten gibt es aufgrund der anfänglichen Zoomstufe niemals Leerraum.
    2. Der Zoom ist nicht perfekt, aber viel besser.
      • Auf ICS bekommst du genau was du willst (passen die Breite).
      • Bei älteren Geräten ist der Zoom deutlich besser als das, was du in deinem zweiten Beispiel in der Frage bekommst.

    Kurz gesagt, ich habe deine Anforderungen an ICS getroffen und dir bei älteren Geräten viel näher gekommen. Ich werde meine Antwort bearbeiten, wenn ich irgendetwas anderes komme, aber das scheint es zu teilen, auch wenn es unvollkommen ist.

    Wie wäre es damit: (zurückgezogen – funktioniert immer noch nicht richtig)

     <html> <head> <meta name="viewport" content="width=device-width, user-scalable=yes" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> </head> <body style="margin: 0; padding: 0"> <img onload="view = new Viewport(this.width, this.height)" alt="image" src="http://orbitingeden.com/orrery/textures/stars.jpg" id="theImage" > <script> Viewport = function(width, height){ var theImage = document.getElementById('theImage'); this.width = width; this.height = height; this.set = function(){ var metas = document.getElementsByTagName('meta'); for(i=0; i<metas.length; i++){ if(metas[i].name == 'viewport'){ metas[i].setAttribute('content','width=' + width + ', height='+ height + ', user-scalable=yes'); theImage.style.width = '100%'; } } } this.set(); } $('body').bind("gesturechange", function(event) { view.set(); }); </script> </body> </html> 

    Ich bin mehr von einem Web-Entwickler, hier ist der Code, der auf Android-Browser funktioniert, das sollte das gleiche in einem Webview funktionieren:

     <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="user-scalable=yes, initial-scale=1.0, width=device-width"> <style> html,body{ width:100%; height:100%; margin:0; padding:0; } #my-image{ width:100%; margin:0; padding:0; } </style> </head> <body> <img id="my-image" src="http://gachie.blog.com/files/2011/06/tour_eiffel.jpg"/> </body> 

    Ich habe es auch versucht, was ein viel bigeres Bild ( http://macjacart.ca/admin/Product_Images/8UhBphVEae.jpg ) und es funktionierte reibungslos.

    Ich hoffe es hilft!

    [BEARBEITEN]

    Da habe ich nicht genug Platz, um es in den Kommentaren zu posten, ich stelle es da:

    Was Sie wollen, ist grundsätzlich, um den Boden des Ansichtsfensters abzuschneiden, sobald Ihre Bildhöhe den Vollbildschirm einnimmt. Sie brauchen etwas Javascript, um das zu tun, und da das Javascript kein Zoom-Event hat, wird es nicht einige Hacks erfordern. Da Android-Flash-Flash, könnten Sie versuchen, diese Lösung, um ein Zoom-Ereignis zu bekommen. Sobald der Zoom ein bestimmtes Niveau erreicht hat, was vom Bildverhältnis abhängt, aktualisierst du das CSS deines Bildes mit einer Höhe: 100% und setze die Breite auf Auto.

    Sie können grundsätzlich Breite oder Höhe einschränken, je nachdem, welche 100% ist. Vielleicht möchten Sie auch die Höhe progressiv auf 100% einstellen, während der Benutzer zoomen wird, so oder so, wie Sie irgendwann einen "Sprung" sehen werden.

    Schauen Sie sich diesen Beitrag auch an, das könnte Ihnen helfen.

    Das Android ist ein Google Android Fan-Website, Alles ├╝ber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.