Android Webview内容超过了Webview

Question

There is a webview I disabled the scrolling. 有一个Webview我禁用了滚动。 And it is equal to the width of the android phone screen size. 它等于android手机屏幕宽度的宽度。

The problem is the content in the webview is not auto resize but display outside of the webview (as I disable the scrolling, but the webview size is not "exactly" the screen width) , you may have a look at screenshot 问题是webview中的内容不会自动调整大小，而是显示在webview之外（因为我禁用了滚动功能，但是webview的大小并不“完全”在屏幕宽度上），您可以查看屏幕截图

I already add 我已经加了

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

and 和

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

but still not work. 但仍然无法正常工作。 Thanks. 谢谢。

在此处输入图片说明

Webview XML: Webview 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: 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);

Answer 1

You seem to be doing something exceptional because I implemented a webview with no issues, as one of my first android projects a month ago. 您似乎做得很出色，因为我实现了一个没有问题的webview，这是一个月前我的第一个android项目。

check xml height, width and layout type above webview 检查WebView上方的xml高度，宽度和布局类型
check that the URL site itself is not setup to do something funky. 检查URL站点本身未设置为执行某些时髦操作。 webview may be correct. webview可能是正确的。 I suggest retargeitng your webview to some site that you know works to test, like my Tumblr blog URL http://sprocketblog.tumblr.com 我建议将您的Web视图重新映射到您知道可以测试的某个站点，例如我的Tumblr博客URL http://sprocketblog.tumblr.com

XML 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);
}

} }

Answer 2

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

Android Webview内容超过了Webview

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-10-05 17:27:31

解决方案2
-1 2014-09-26 09:31:15

Android Webview内容超过了Webview

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-10-05 17:27:31

解决方案2 -1 2014-09-26 09:31:15

解决方案1
1 已采纳 2014-10-05 17:27:31

解决方案2
-1 2014-09-26 09:31:15