Proper website scaling on Android devices via WebView

Question

My application is a simple < WebView cover that displays a web page in a fixed landscape orientation, the page has a centered div of 760 pixels and 415 pixels high, and this should be displayed on all devices so that it (roughly) fits the screen, user cannot change the scaling ... I have almost everything that works separately from scaling.

I have the following view meta tag on the page:

 <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

The manifest for the WebView .apk computer that I created is as follows:

 <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> 

I should mention that the original .apk goal was Android 2.2, and I recently changed to 2.3.1 and added another line to the manifest, but that didn't change anything:

 android:xlargeScreens="true" 

In the .java code, I added the following:

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

For the purposes of this question, suppose that the sole content of the entire site is <div> :

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

My problem is that I can’t come up with a solution for scaling “one size” for all Android devices, and everything else that I set myself the task of ensuring excellent work.

I tried this on three different devices, one tablet and two phones, and there is a big gap on the left, right and bottom of the <div> layer. It seems that the width of 760px has about 50px clearance on both sides and the same thing on each of the devices, all I want to do is scale so that it roughly covers the screen on all devices.

My phone says that it got window.innerWidth from 854 with window.devicePixelRatio 1.5, and if I changed the initial and maximum scale to 1.12, then the <div> layer is perfect for my device. The table says that he got window.innerWidth from 980 with window.devicePixelRatio 1.0 and it looks like a scale of about 1.27. I don't know the details of the third device, but using 1.1 seems to do the trick.

Of course, changing the initial scaling is not a solution, and even trying to make it would be a complete nightmare, so with fingers crossed, can someone tell me a dazzlingly obvious thing that I am missing that will make this work? Or am I just asking the impossible to automatically scale the view to a fixed <div> size?

Answer 1

That's right ... On my way home, I got stuck in traffic and had a good reputation, I came to the conclusion that I sharply changed my mind about this problem.

It's rude, but it does the job, I removed the meta tag from the site and added it to the application:

 // 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); 

This works very well, but I ran into two problems since I made this post.

Firstly, by deleting the meta tag, I seem to have removed the maximum / minimum scale restriction, which means that clicking on any <INPUT> element that displays the Android keyboard will zoom. Fortunately, adding this line to the code solves this problem so far:

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

Secondly, I do not have a workable solution in that on some devices, such as the Archos101 tablet, there are soft buttons instead of soft buttons. Here, the scaling code will be scaled to the width of the device, which means that the site is located under the soft buttons ... Currently we are thinking about implementing a solution based on READ_PHONE_STATE or we are not necessarily adding the ability to exit the application without hardware buttons and add this to the manifest:

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

Hope someone else finds this and saves some time.