【问题标题】:Android webview content exceed the webviewAndroid webview 内容超过 webview
【发布时间】:2014-09-26 09:22:33
【问题描述】:

有一个 webview 我禁用了滚动。并且它等于android手机屏幕尺寸的宽度。

问题是 webview 中的内容不是自动调整大小而是显示在 webview 之外(因为我禁用了滚动,但 webview 大小不是“完全”屏幕宽度),你可以看看 screenshot

我已经添加了

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>

    newsContent.getSettings().setUseWideViewPort(true);
    newsContent.getSettings().setLoadWithOverviewMode(true);

但还是不行。谢谢。

Web 视图 XML:

        <WebView
            android:id="@+id/newsContent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="5dp"
            android:background="#ffffff" />

Webview JAVA:

    StringBuilder sb = new StringBuilder();
    sb.append("<HTML><HEAD><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'><LINK href=\"news.css\" type=\"text/css\" rel=\"stylesheet\"/><script src=\"jquery-1.10.2.js\" type=\"text/javascript\"></script></HEAD><body>");
    sb.append(newsItem.description.toString());
    sb.append("<script>$('img').on('click', function() {app.zoom($(this).attr('src'));});</script></body></HTML>");

    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){
        newsContent.getSettings().setAllowUniversalAccessFromFileURLs(true);
        newsContent.getSettings().setAllowFileAccessFromFileURLs(true);
    }

    newsContent.setWebChromeClient(new WebChromeClient());
    newsContent.setWebViewClient(new WebViewClient());

    newsContent.getSettings().setUseWideViewPort(true);
    newsContent.getSettings().setLoadWithOverviewMode(true);

    newsContent.getSettings().setJavaScriptEnabled(true);
    newsContent.addJavascriptInterface(new WebViewJavaScriptInterface(), "app");

    newsContent.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html", "utf-8", null);

    newsContent.setOnTouchListener(new View.OnTouchListener() {
        public boolean onTouch(View v, MotionEvent event) {
          return (event.getAction() == MotionEvent.ACTION_MOVE);
        }
    });

    newsContent.setVerticalScrollBarEnabled(false);
    newsContent.setHorizontalScrollBarEnabled(false);

【问题讨论】:

  • webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
  • 视图太大,无法放入绘图缓存,需要 7890400 字节,只有 3686400 可用
  • webview.setDrawingCacheEnabled(false);
  • 如果this适合你,你可以试试。
  • 谢谢。它适用于图像,但文本不会自动适应并创建下一行

标签: android html css android-layout webview


【解决方案1】:

你似乎在做一些特别的事情,因为我实现了一个没有问题的 webview,这是我一个月前的第一个 android 项目之一。

  • 检查webview上方的xml高度、宽度和布局类型

  • 检查 URL 站点本身是否未设置为做一些时髦的事情。 webview 可能是正确的。我建议将您的 webview 重新定位到您知道可以进行测试的某个站点,例如我的 Tumblr 博客 URL http://sprocketblog.tumblr.com

XML

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context=".HomeFeed"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

<WebView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/webview" >
    </WebView>
</RelativeLayout>

JAVA

public class NewsFeed extends Activity {

private WebView mWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home_feed);

    mWebView = (WebView) this.findViewById(R.id.webview);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.loadUrl("http://sprocketblog.tumblr.com");
    mWebView.setWebViewClient(new TumblrWebViewClient());

    if (savedInstanceState == null)
}

//Keeps user in webview on multiple taps without shooting off to Chrome
private class TumblrWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView webview, String url) {
        webview.loadUrl(url);
        return true;
    }
//On error shows HTML resource
    @Override
    public void onReceivedError (WebView view, int errorCode, String description, String failingUrl) {
        mWebView.loadUrl("file:///android_asset/networkerror.html");
    }


}

//Binds OS back button to webview
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check if the key event was the Back button and if there's history
    if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
        mWebView.goBack();
        return true;
    }
    // If it wasn't the Back key or there's no web page history, bubble up to the default
    // system behavior (probably exit the activity)
    return super.onKeyDown(keyCode, event);
}

}

【讨论】:

    【解决方案2】:

    在您的 XML 布局中使用 android:layout_width="wrap_content"

    【讨论】:

    • 感谢您的回答。你介意更具体吗?设置为父布局/webview/其他布局?
    • 为什么在没有任何评论来解释原因的情况下投反对票?我认为这种行为在社区中真的没用。
    • 是的。任何答案都应该是合适的,我赞成你的努力,尽管它不起作用
    猜你喜欢
    • 2014-09-18
    • 1970-01-01
    • 2012-03-19
    • 2011-05-17
    • 1970-01-01
    • 2014-02-21
    • 2017-09-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多