Android Webview內容超過了Webview

Question

有一個Webview我禁用了滾動。 它等於android手機屏幕寬度的寬度。

問題是webview中的內容不會自動調整大小，而是顯示在webview之外（因為我禁用了滾動功能，但是webview的大小並不“完全”在屏幕寬度上），您可以查看屏幕截圖

我已經加了

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

和

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

但仍然無法正常工作。 謝謝。

在此處輸入圖片說明

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

Answer 1

您似乎做得很出色，因為我實現了一個沒有問題的webview，這是一個月前我的第一個android項目。

檢查WebView上方的xml高度，寬度和布局類型
檢查URL站點本身未設置為執行某些時髦操作。 webview可能是正確的。 我建議將您的Web視圖重新映射到您知道可以測試的某個站點，例如我的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>

爪哇

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