Webview缩放会导致内容在某些设备上重新布局

时间:2016-03-08 13:19:03

标签: android html android-webview

我有像这样的webView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="@dimen/MarginDefault">

    <WebView
        android:id="@+id/webView_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"/>

</RelativeLayout>

我想加载HTML-String。我还希望内容可以缩放。

它在某些设备上运行良好,在其他设备上运行良好。似乎有些设备在缩放后再次布局内容。这导致内容中的换行符(在三星S4,华为Ascend Mate 7上) enter image description here

Nexus 5上的缩放工作正如预期的那样:Nexus 7: enter image description here

当我缩放网站(在Chrome或其他浏览器中)时,它可以在所有设备上以相同的方式工作(例如在第二个屏幕截图中,没有换行符)。所以我一定做错了。但是什么?

以下是我设置内容的方式:

webViewContent = (WebView) findViewById(R.id.webView_content);
    webViewContent.getSettings().setBuiltInZoomControls(true);
        webViewContent.getSettings().setDisplayZoomControls(false);
        webViewContent.setInitialScale(100);

        String content = "<!DOCTYPE html>\n" +
                "<html>\n" +
                "\t<head>\n" +
                "\t\t<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n" +
                "\t\t<title>Test</title>\n" +
                "\t\t<style type=\"text/css\">\t\t* {font-family: \"helvetica\"; font-size: 16;}\t\ta:link {color: " +
                "#004A94;} \t\ta:visited {color: #004A94;} \t\ta:hover {color: #004A94;} \t\ta:active {color: " +
                "#004A94}</style>\n" +
                "\t\t</head>\n" +
                "\t<body>\t\n" +
                "\t\t<div style=\"padding-bottom: 2em;\">\n" +
                "\t\t\t<h2>Just another test string which is quite long</h2>\n" +
                "\t\t</div>\n" +
                "\t</body>\n" +
                "</html>";


        webViewContent.loadDataWithBaseURL(ServerInformation.getBaseUrl(),
                content
                , "text/html", "UTF-8", "");

HTML-String的形状更好:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Test</title>
        <style type="text/css">     * {font-family: "helvetica"; font-size: 16;}        a:link {color: #004A94;}        a:visited {color: #004A94;}         a:hover {color: #004A94;}       a:active {color: #004A94}</style>
        </head>
    <body>  
        <div style="padding-bottom: 2em;">
            <h2>Just another test string which is quite long</h2>
        </div>
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

我找到了这个问题的原因。 将$array = array( 'lorem', 'ipsum', 'what' ); 更改为android:layout_height="wrap_content"会解决此问题(如果布局中没有更改任何内容,则会发生此事件)。我仍然不知道为什么会发生这种情况,但至少它现在有效。