Italian Problema di zoom utilizzando WebView

Marcello Pietrelli

Member
Licensed User
Longtime User
Ciao a tutti,
fino a poco tempo fa quando caricavo una pagina web nella mia App utilizzando una semplice WebView, non avevo alcun problema durante lo Zoom In del testo della pagina web stessa, ovvero il testo si ridimensionava automaticamente su dispositivi con Android 2.3.6 o precedenti.
Con le nuove versioni di Android, quando ingrandisco la pagina, il testo non si allinea più automaticamente e viene "mangiato" dal bordo destro e sinistro dello schermo.

Qualcuno sa come risolvere il problema?

Vi allego anche due schermate del problema a cui mi riferisco e il codice che ho utilizzato per visualizzare la pagina web...

GRAZIE INFINITE!!!

B4X:
Sub Globals
    Dim WebView1 As WebView
End Sub
Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("layoutMain")
    WebView1.Height=100%y
    WebView1.Width=100%x
    WebView1.LoadUrl("http://www.columbia.edu/~fdc/sample.html")
End Sub
 

Attachments

  • No Zoom.png
    No Zoom.png
    286.6 KB · Views: 251
  • Zoom problem.png
    Zoom problem.png
    341.8 KB · Views: 244

udg

Expert
Licensed User
Longtime User
Prova a mettere nel Designer Script:
B4X:
WebView1.SetLeftAndRight(0%x,100%x)
WebView1.SetTopAndBottom(0%y,100%y)
e ad eliminare le due righe Webview1.Height e WebView1.Width dall'Activity_Create.

Edit: ho riletto il post #1 e probabilmente la questione posta è tutt'altra, in tal caso mi scuso.
Con il codice di cui sopra, sul mio tablet viene caricata regolarmente la pagina desiderata e quando effettuo lo zoom manuale posso spostare l'immagine in modo da visualizzare regolarmente il bordo, quindi alla fine non manca nulla.
L'effetto desiderato è che, effettuato lo zoom, l'immagine si riposizioni automaticamente con l'angolo in alto a sinistra visualizzato?
udg
 
Last edited:

Marcello Pietrelli

Member
Licensed User
Longtime User
Grazie della risposta udg!

Il problema purtroppo persiste... e sicuramente non mi sono spiegato bene... Sorry!
Nel mio vecchio smartphone con Android 2.3.6 il testo non viene tagliato a destra e a sinistra, ma riallineato e mandato accapo automaticamente, come si vede nelle schermate che allego.

Vorrei poter fare la medesima cosa nei nuovi dispositivi. :)
 

Attachments

  • No Zoom.png
    No Zoom.png
    109.7 KB · Views: 242
  • Zoom OK.png
    Zoom OK.png
    33 KB · Views: 249

udg

Expert
Licensed User
Longtime User
Ciao, ora mi è chiaro il problema..anche se nel mio caso non si manifesta!
Ho un tablet 10" con Android 4.2.2. In apertura vedo la pagina a dimensione standard. Poi eseguo lo zoom tenendo d'occhio il punto 9 dell'elenco mostrato su quella pagina. Arrivato ad un certo ingrandimento, il testo del punto 9 va a capo, come ti aspetti tu.
Il mio layout è minimale. La webview direttamente sull'activity.

Se hai qualche particolarità nel layout, prova a guardare lì oppure inseriscilo in un post e vediamo se salta fuori l'ispirazione giusta.
 

Marcello Pietrelli

Member
Licensed User
Longtime User
Ciao!!!
Pensando che potesse dipendere dalla versione di B4A (io dispongo della versione 2.52) ho installato la versione 4.0 trial, senza però ottenere il risultato sperato.

Allego il test... :)
 

Attachments

  • WebView Test.zip
    339 KB · Views: 211

udg

Expert
Licensed User
Longtime User
Ciao.
Ho provato il tuo test senza alcuna variazione e sul mio tablet funziona esattamente come dicevo ieri (al quinto incremento di zoom vedo la dicitura del punto 9 andare a capo).
Un errore nel Designer Script c'è: prima di AutoScaleAll è necessario inserire un AutoScaleRate(rate) dove rate solitamente va da 0.5 a 0.8 ma accetta valori da 0 a 1.
Ora ho:
B4X:
'All variants script
AutoScaleRate(0.5)
AutoScaleAll
WebView1.SetLeftAndRight(0%x,100%x)
WebView1.SetTopAndBottom(0%y,100%y)

Ho provato a ridurre il 100%x a soli 20%x (per eliminare gran parte dello spazio extra del tablet) e l'immagine parte bene; con lo zoom la ingrandisco con l'effetto di avere le diciture più lunghe andare a capo. Al di sopra di un certo valore di zoom alcune diciture non si leggono completamente se non si sposta manualmente l'immagine a destra e sinistra.
 

Marcello Pietrelli

Member
Licensed User
Longtime User
Ho fatto il test su Samnsung GT-P3110 con Android 4.1.2 e funziona!
Purtroppo il problema persiste con il mio telefono Sony Xperia M2 con Android 4.4.4.
Che cosa strana!!! o_O
 

udg

Expert
Licensed User
Longtime User
Un dubbio. E' possibile che il sony xperia abbia attiva una qualche opzione di configurazione relativa ad un font ingrandito o similare?
Prova a vedere se hai roba del genere in Impostazioni / Accessbilità o altre aree dove il produttore del cellulare potrebbe avere inserito una cosa del genere; magari trovi qualcosa che invece di "normal" oppure "100%" ha un valore diverso (tipo "large" oppure "120%").

Non mi viene in mente altro..per ora :)
 

Marcello Pietrelli

Member
Licensed User
Longtime User
La dimensione carattere sotto il menù "Display" è impostata su "Normale", quindi non credo sia quello il problema...
 

udg

Expert
Licensed User
Longtime User
In allegato ti propongo un'alternativa basata sulle Anchor del Designer e niente script.
E' solo un modo diverso di dire che la webview debba occupare l'intera superficie dell'activity, quindi eventuali peculiarità xperia che comportino il problema iniziale dovrebbero manifestarsi comunque.

Ho anche una domanda (banale): quando visualizzi l'immagine "errata" di cui al post #1, cosa succede se provi a "spostare manualmente" l'immagine a sinistra e destra? Vedi le parti mancanti oppure è come spostare una foto catturata una volta per tutte e quindi spostandoti non vedi parti precedentemente nascoste?
Nel primo caso direi che alla fine si tratta di un problema di "centratura", ovvero il rendering del webview automaticamente mostra la parte centrale della pagina ingrandita e tocca a te (manualmente o con javascript) spostare il contenuto del wv in modo da mostrare l'angolo in alto a sinistra.

Edit: spulciando la doc su Android Developer riguardante la webview ho trovato questo riferimento che potrebbe essere utile.
In pratica bisognerebbe "configurare" la webview con l'equivalente di
B4X:
webview1.getSettings().setLoadWithOverviewMode(true);
webview1.getSettings().setUseWideViewPort(true);
fattibile tramite Reflection, direi.
Su StackOverflow qualcuno sostiene però che se la pagina caricata ha
<meta name="viewport" content="user-scalable=no"/>
anche l'accorgimento di sopra non funziona.
 

Attachments

  • wvtest.zip
    6.9 KB · Views: 201
Last edited:

udg

Expert
Licensed User
Longtime User
Ok. Ho giocato un po' con i riferimenti di cui al post precedente ed è possibile che abbia risolto.
Prova:
B4X:
Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout("layoutMain")
   Dim r As Reflector
   r.Target = WebView1
   r.Target=r.RunMethod("getSettings")
   r.RunPublicmethod("setLoadWithOverviewMode", _
    Array As Object(True), Array As String("java.lang.boolean"))
   r.RunMethod2("setUseWideViewPort",False,"java.lang.boolean")
   WebView1.LoadUrl("http://www.columbia.edu/~fdc/sample.html")
End Sub

La scelta di porre UseWidePort pari a false deriva da:
"Sets whether the WebView should enable support for the "viewport" HTML meta tag or should use a wide viewport. When the value of the setting is false, the layout width is always set to the width of the WebView control in device-independent (CSS) pixels. When the value is true and the page contains the viewport meta tag, the value of the width specified in the tag is used. If the page does not contain the tag or does not provide a width, then a wide viewport will be used."
 
Last edited:

Marcello Pietrelli

Member
Licensed User
Longtime User
Ancora niente... non funziona...
Praticamente la pagina HTML ingrandita rimane tale e quale e, anche spostandola a destra e a sinistra, si vede solamente la porzione ingrandita e ovviamente il testo non allineato che prosegue o precede i margini...
 

Marcello Pietrelli

Member
Licensed User
Longtime User
:( HELP!!! :(

Scusatemi ancora, ma non c'è proprio modo di risolvere il problema del mancato allineamento del testo, dopo che si è ingrandita una pagina web col pulsante + dello zoom o direttamente con le due dita? Perché su alcuni dispositivi e/o versioni di Android funziona e su altri no?
 
Top