Question

I have a very simple Activity with the following layout…

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </WebView>
</LinearLayout>

The Activity itself is set for full screen (no title bar and no Android notification bar) and forced to landscape.

So…on my HTC Desire, the WebView in theory is occupying 800×480 (wxh) pixels. All good so far, it DOES fill the screen totally.

The confusion I have is that the WebView loads an HTML document from a server which uses a javascript function to get the screen width and height…

<script type="text/javascript">
<!--
    function getDims() {
        var screenW = screen.width;
        var screenH = screen.height;
        return "size=" + screenW + "x" + screenH;
    };
-->
</script>

…the problem is that screenW is 527 and screenH is 320 and I don’t understand why.

Looking at a height of 320, it’s exactly two-thirds of 480 so I then looked at what two-thirds of 800 is (~533). So it seems both screen.width and screen.height in the javascript are reporting two-thirds of actual pixels available.

Can anyone explain why this is happening?

Answer 1

For website you can control the screen size in android using a meta tag in your site.

There are three settings for the “screen” size low-dpi, medium-dpi and high-dpi.

So the device is automatically scaling your website (it assumes medium-dpi if you didn’t set anything)

In javascript you don’t get the exact pixel size of the device, you get more like the device is somewhere in that area…

A good explanation for this can be found here: http://developer.android.com/guide/webapps/targeting.html