SINGLE_COLUMN 模式的 Android webview 问题答案

【问题标题】：Android webview issue with SINGLE_COLUMN modeSINGLE_COLUMN 模式的 Android webview 问题
【发布时间】：2013-03-16 14:21:09
【问题描述】：

我目前在使用 Android WebView 时遇到问题。这个 webview 目前是这样初始化的：

_post_WebView = (WebView) view.findViewById(R.id.post_webview);
_post_WebView.setBackgroundColor(Color.WHITE);
_post_WebView.setWebViewClient(new PostWebViewClient());
_post_WebView.getSettings().setBuiltInZoomControls(true);
_post_WebView.getSettings().setSupportZoom(true); 
_post_WebView.getSettings().setPluginState(PluginState.ON);
_post_WebView.getSettings().setJavaScriptEnabled(true);
_post_WebView.getSettings().setRenderPriority(RenderPriority.HIGH);
_post_WebView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
_post_WebView.setWebChromeClient(new WebChromeClient() {});
_post_WebView.getSettings().setUseWideViewPort(false);
_post_WebView.getSettings().setLoadWithOverviewMode(true);
_post_WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

此 webview 用于显示从服务器检索到的 HTML 字符串。（使用loadData 方法）。现在的问题是，在SINGLE_COLUMN 模式下，图像和文本的宽度和高度都被适当地调整了，但是嵌入的 youtube 视频虽然在宽度上调整了大小，但在高度上没有调整大小，因此只显示黑色盒子。

在LayoutAlgorithm.NORMAL 中一切正常。如何确保 youtube 视频也可以在 SINGLE_COLUMN 算法中正确调整大小？

Youtube 视频是这样嵌入的：

<iframe allowfullscreen="" frameborder="0" height="315" width="420" src="YOUTUBE_VIDEO_LINK"></iframe>

【问题讨论】：

这个问题你解决了吗？
是的，我做到了。我已经添加了我的答案。

标签： android webview youtube

【解决方案1】：

我终于通过使用 loadDataWithBaseURL(null, htmlString, "text/html", "utf-8", null) 而不是 loadData(htmlString,"text/html","utf-8") 解决了这个问题，同时使用 CSS 向 iframe 添加了 100% max-width 属性和自动 width 和 height 属性：

htmlString = "<html><head><style>iframe {max-width: 100%; width:auto; height: auto;}</style></head><body>"+htmlString+"</body></html>";

这不是最干净的方法，但它确实有效。

如果与布局算法NARROW_COLUMNS 一起使用，此方法也应该有效。

【讨论】：