Effettuare la visualizzazione Web in un tablet simulare un dispositivo di piccole dimensioni

Question

Ho un sito web per dispositivi mobili che è molto adatto per dispositivi di piccole dimensioni, come gli smartphone, ma lo non ha un buon aspetto su un tablet.

Sto utilizzando una visualizzazione Web per visualizzare il sito Web. Questa webview occupa tutta l'area dello schermo. C'è un modo per far sì che la webview simuli un piccolo dispositivo?

non ho quasi mai dalla documentazione quale combinazione di opzioni (, setUseWideViewPort, setDefaultZoom) farà a realizzare quello che voglio. Qualsiasi aiuto sarà apprezzato.

Obs: ho già provato a impostare lo zoom del testo (setTextZoom(int)). Andò un po 'meglio, ma non così buono come sullo smartphone.

Obs2: I non è possibile modificare il sito Web. :(

UPDATE:

Se cambio la larghezza WebView a 720 px, la pagina html modifiche al layout mobile e display ben Ora voglio fare questo, ma mantenendo il WebView con piena larghezza.. Come ingannare la pagina html per pensare che la larghezza della webview sia più piccola di quella che è realmente.

Obs: lo zoom non funziona La pagina html non è abilitata e penso che non sia un buon modo, dato che lo zoom non cambia le dimensioni della webview percepita

Answer 1

Aggiornamento: Se si dispone di un'API più recente (> 18) potresti voler dare un'occhiata alla nota alla fine di questa domanda.

---

Dopo aver lottato per un bel po 'ho trovato la soluzione!

La soluzione non era in zoomming. Lo zoom non è stato abilitato per la pagina html e non ha influenzato la dimensione percepita dall'html.

ho ottenuto abbassando il larghezza del WebView:

ViewGroup.LayoutParams webviewLayoutParameters = mWebView.getLayoutParams(); 

webviewLayoutParameters.width = (int) (760); 
webviewLayoutParameters.height =(int) (webviewHeight); 
mWebView.setLayoutParams(webviewLayoutParameters); 

Poi, come pagina aveva uno stile che ha cambiato per schermo da inferiore a 768px, è iniziato un aspetto diverso. Molto meglio.

Ma poi Volevo ingrandire quella piccola webview in modo che potesse essere contenuta nell'intero schermo. Per quello ho usato scaleX e scaleY.

Questa è la mia soluzione completa commentato:

// First, get the current screen size 
Display display = getWindowManager().getDefaultDisplay(); 
Point size = new Point(); 
display.getSize(size); 
int displayWidth = size.x; 
int displayHeight = size.y; 

//Then, set the amount you want to make your screen smaller. This means that it will comunicate to the HTML that its 20% smaller than it really is 
float amplification_ratio = (float) 0.20; 

// Shrink webview size 
ViewGroup.LayoutParams webviewLayoutParameters = mWebView.getLayoutParams(); 
webviewLayoutParameters.width = (int) (displayWidth*(1-amplification_ratio)); 
webviewLayoutParameters.height =(int) (displayHeight*(1-amplification_ratio)); 
mWebView.setLayoutParams(webviewLayoutParameters); 

// Now scale it the inverse ammount so it will take the full screen. 
mWebView.setScaleX(1/(1 - amplification_ratio)); 
mWebView.setScaleY(1/(1 - amplification_ratio)); 

ha funzionato abbastanza bene. Sono riuscito a ridimensionarlo in modo da modificare le dimensioni dello schermo. Il restringimento e il ridimensionamento renderanno la qualità dell'immagine un po 'più bassa, ma non è un grosso problema.

Obs: la pagina HTML è stata creata in bootstrap e aveva solo classi per i dispositivi -xs di bootstrap. Quindi ho dovuto simulare che lo schermo era più piccolo di 768px.

---

Obs2 (aggiornamento): Naming questa procedura

ho implementato questo sul mio app, testato (modello e l'integrazione), e la sua ora vivono in produzione. Per creare le funzioni e le variabili, dovevo nominare questa procedura. Ciò che fa è come aumentare le dimensioni di un pixel di una webview. In questo modo, la webview occuperà ancora tutto lo schermo, ma avrà una larghezza, in pixel, più piccola.

Con questo in mente, qualsiasi nome come pixelEnlargementFactor, pixelMagnificationRatio o pixelSizeMultiplicator sarà un buon nome.

---

UPDATE:

ATTENZIONE: Utilizzare il metodo di cui sopra solo in casi specifici!

Avevo una vecchia versione API (15) e un RelativeLayout con molte opzioni. Allora, lo setInitialScale(120) non funzionava come volevo.

Ora ho cambiato la mia API in 19 e il mio layout in un più semplice FrameLayout con un minor numero di opzioni. Ora il comando setInitialScale(120) insieme a mWebView.getSettings().setUseWideViewPort(false) ha fatto tutto ciò che ho ottenuto prima con molto meno codice.