WebView中的视口元标记无法在Android中正确缩放内容

Question

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?

Answer 1

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