CODEWITHSUNDEEP
androidandroid-webviewmeta-tagsandroid-scrollview
Vivek
Vivek

Reputation: 1843

Viewport metatag in WebView not scaling the contents properly in Android

I have a WebView inside a ScrollView. This is my first requirement as there will be other elements also inside the ScrollView. I want the WebView to fit the content in the device-width available. For this I am using viewport meta tag as shown below.

<meta name=\"viewport\" content=\"target-densitydpi=device-dpi, initial-scale=1, width=device-width\" />

WebView's height is set to Wrap_Content. I am loading the WebView on button click using loadDataWithBaseURL() method. Now the problem is that it is causing the content below the WebView flicker and the WebView content is not sizing properly. It sometimes leave the space below the WebView content. When I remove the metag tag, WebView content loads with desired size but doesn't fit in the viewport.

Any suggestions?

Upvotes: 0

Views: 673

Answers (1)

marcin.kosiba
marcin.kosiba

Reputation: 3231

This is probably caused by the fact that the WebView processes the viewport meta-tag asynchronously. This means that for a brief moment the WebView uses a default viewport (320 px wide) and if your content is sufficiently complex it might be possible for the first layout pass to occur while the default viewport is still in effect.

I've never tried this but you could make the content of the page not display (something like style="display: none") until the viewport tag has been processed (window.onload should be sufficient).

Upvotes: 1

Related Questions