Scalatura adeguata di un sito web su dispositivi Android tramite WebView

La mia applicazione è un semplice WebView "wrapper" che visualizza una pagina web in un orientamento orizzontale orizzontale, la pagina ha un div centrato che è largo 760px e 415px alto e questo dovrebbe essere visualizzato scalato su tutti i dispositivi in ​​modo che (approssimativamente) si adatta allo schermo , l'utente non può cambiare la scala … ho quasi tutto quello che sta lavorando a parte la scala.

Ho la seguente meta tag di visualizzazione nella pagina:

  • Autorizzazioni di richiesta basate sul livello API
  • Fare N chiamate sequenziali api utilizzando RxJava e Retrofit
  • Certificato non attendibile che utilizza ksoap2-android
  • Annullare / interrompere / interrompere una richiesta di resttemplate spring-android
  • Espresso, android.support.test.express.NoActivityResumedException: Nessuna attività in fase RESUMED.
  • Come includere il JAR Spongy Castle in Android?
  •  <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

    Il manifesto per il wrapper WebView che ho creato è il seguente:

     <supports-screens android:smallScreens="true" android:normalScreens="true" android:largeScreens="true" android:anyDensity="true" /> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name="{my name}" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> 

    Devo menzionare che originariamente l'objective .apk era Android 2.2 e recentemente sono cambiato fino a 2.3.1 e ho aggiunto un'altra linea al manifesto, ma non ha fatto differenza a niente:

     android:xlargeScreens="true" 

    Ho aggiunto quanto segue al codice .java :

     webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY); webview.setScrollbarFadingEnabled(false); webview.getSettings().setSupportZoom(false); webview.getSettings().setBuiltInZoomControls(false); setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); 

    A questo proposito si supponga solo che l'unico contenuto dell'integer sito è il seguente <div> :

     <div style="margin: auto; position:relative; align:center; top:0px; width:760px; height:415px; background-color:#000000"> 

    Il mio problema è che non riesco a trovare una soluzione di scalabilità "su misura per tutto il mondo" in tutti i dispositivi Android, tutto il resto che mi è stato affidato per la consegna funziona bene.

    Ho provato questo su tre dispositivi diversi, una tavoletta e due telefoni, e c'è un grande divario a sinistra, a destra e in basso del livello <div> . Sembra che la width 760px abbia circa un altro intervallo di 50px da entrambi i lati e lo stesso sotto di ciascuno dei dispositivi, tutto quello che voglio fare è la scala che in su in modo che approssima lo schermo su tutti i dispositivi.

    Il mio telefono dice che ha un window.innerWidth di 854 con una window.devicePixelRatio di 1.5 e se cambio la scala iniziale e massima a 1.12 il livello <div> adatta quasi perfettamente sul mio dispositivo. La tabella dice che ha un window.innerWidth di 980 con una window.devicePixelRatio di 1.0 e sembra come una scala di circa 1,27. Non conosco i dettagli del terzo dispositivo, ma utilizzando 1.1 sembra fare il trucco su questo.

    Naturalmente cambiare la scala iniziale non è una soluzione e anche tentare sarebbe un incubo completo così, le dita attraversarono, qualcuno può dirmi la cosa accecante ovvio che mi manca che farà questo lavoro? O chiedo semplicemente l'impossibilità di scalare automaticamente la vista a una dimensione fissa <div> ?

    One Solution collect form web for “Scalatura adeguata di un sito web su dispositivi Android tramite WebView”

    Giusto … mentre sono tornato a casa, sono rimasto bloccato in una marmellata e ho avuto un buon pensiero buono, sono giunto alla conclusione che ero drammaticamente sopra-pensare a questo problema.

    Questo è grezzo, ma fa il lavoro, ho rimosso il meta tag dal sito e ho aggiunto questo all'applicazione:

     // Set up up the scaling value float scaling = 100; int display_width; DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); display_width = dm.widthPixels; scaling = (((float)display_width/760)*100); // 760 here is my container div width scaling = (int) Math.floor(scaling); // Set up the webview and apply the scale value webview = (WebView) findViewById(R.id.webview); webview.setInitialScale((int)scaling); 

    Questo funziona abbastanza bene ma ho incontrato due problemi fin da quando ho fatto questo post.

    Il primo è che rimuovendo il meta tag che sembro aver rimosso la mia limitazione sulla scala massima / minima, ciò significa che fare clic su qualsiasi elemento <INPUT> che visualizza la tastiera Android comporterà una modifica della scalatura. Fortunatamente, aggiungendo questa row al codice risolve finora questo problema:

     webview.getSettings().setDefaultZoom(ZoomDensity.FAR); 

    Il secondo non ho una soluzione realizzabile e che alcuni dispositivi, come la tavoletta Archos101, dispongono di pulsanti software invece di pulsanti hardware. Il codice di scala qui scala alla width del dispositivo e che significa che il sito passa sotto i pulsanti software … Attualmente READ_PHONE_STATE pensando ad implementare una soluzione basata su READ_PHONE_STATE o facoltativamente aggiungere la possibilità di abbandonare l'applicazione senza pulsanti hardware e aggiungerlo al manifesto :

     <uses-permission android:name="archos.permission.FULLSCREEN.FULL" /> 

    Speriamo che qualcun altro troverà questo e risparmiarsi un po 'di tempo.

    L'Android è un fan Android di Google, tutto su telefoni Android, Android Wear, Android Dev e applicazioni Android Games e così via.