Android webview内容超出了webview

时间:2014-09-26 09:22:34

标签: android html css android-layout webview

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

问题是webview中的内容不是自动调整大小而是显示在webview之外(因为我禁用滚动,但webview大小不是“完全”的屏幕宽度),你可能会看一下截图< / p>

我已添加

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

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

但仍无效。感谢。

enter image description here

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:

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

2 个答案:

答案 0 :(得分:1)

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

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

  • 检查URL网站本身是否设置为做一些时髦的事情。 webview可能是正确的。我建议将您的webview重新定位到一些您知道可以测试的网站,例如我的Tumblr博客网址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);
}

}

答案 1 :(得分:-1)

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