Android WebView size and contents size

Size

This is one of difficult problem to decide WebView component size and contents size.

We have several things to consider to show web contents properly for users.

We have to care of

• WebView size on the display (wrap_content, match_parent, specific size (dp)
• WebView Mode (useWideViewPort, loadWithOverviewMode), and Initial Scale
• HTML contents (pixel, viewport) etc…

Android WebView component size

Case 1: Like Web browser (full size)

<WebView
       android:id="@+id/webView"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
/>

Case 2: Web Ads (fix size)

<WebView
       android:id="@+id/webView"
       android:layout_width="320dp"
       android:layout_height="50dp"/>

Case 3 : Web Ads (not fix size width is full)

<WebView
       android:id="@+id/webView"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"/>

Case 1 are very simple. In this case, We don’t need to manage a lot in HTML contents and others, because WebView is flexible and manage property by itself

Case 2, Case 3, we need to take care of contents mode and size carefully.

Android WebView mode

In terms of contents, there are 2 settings under WebSettings class

Property	Description
useWideViewPort	WebView supports the “viewport” HTML meta tag or will use a wide viewport
loadWithOverviewMode	Gets whether this WebView loads pages in overview mode true : Zoom out, and fit contents

Kotlin

webView.settings.useWideViewPort = true
webView.settings.loadWithOverviewMode = true

Android WebView initial scale

Sets the initial scale for this WebView. 0 means default. The behavior for the default scale depends on the state of useWideViewPort, loadWithOverviewMode

webView.setInitialScale(1)

webView.setInitialScale(getScale(320.0))



private fun getScale(size: Double): Int {
        val display = (getSystemService(Context.WINDOW_SERVICE) as WindowManager).defaultDisplay
        val width = display.width
        var scale : Double = width / size
        scale = scale * 100.0
        return scale.toInt()
}

HTML Contents

Meta tag viewport

<meta name="viewport" content="width=device-width, initial-scale=1">