Android Webview - веб-страница должна соответствовать экрану устройства

Я попробовал следующее, чтобы соответствовать веб-странице на основе размера экрана устройства.

mWebview.setInitialScale(30);

а затем установите окно просмотра метаданных

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<meta name="viewport" content="width=device-width, target-densityDpi=medium-dpi"/>

Но ничего не работает, веб-страница не привязана к размеру экрана устройства.

Может ли кто-нибудь сказать мне, как это сделать?

Ответы

Ответ 1

Вам нужно рассчитать масштаб, который вам нужно использовать вручную, а не устанавливать значение 30.

private int getScale(){
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    int width = display.getWidth(); 
    Double val = new Double(width)/new Double(PIC_WIDTH);
    val = val * 100d;
    return val.intValue();
}

Затем используйте

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());

Ответ 2

Вы можете использовать этот

    WebView browser = (WebView) findViewById(R.id.webview);
    browser.getSettings().setLoadWithOverviewMode(true);
    browser.getSettings().setUseWideViewPort(true);

это фиксирует размер на основе размера экрана.

Ответ 3

Друзья,

Я нашел много импорта и отличную информацию от вас. Но единственный способ для меня был таким:

webView = (WebView) findViewById(R.id.noticiasWebView);
webView.setInitialScale(1);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setScrollbarFadingEnabled(false);
webView.loadUrl("http://www.resource.com.br/");

Я работаю над Android 2.1 из-за того, что у вас есть устройства. Но я исправил свою проблему, используя часть информации от каждого из них.

Спасибо вам!

Ответ 4

Попробуйте с помощью рекомендаций HTML5

http://www.html5rocks.com/en/mobile/mobifying.html

И с этим, если ваша версия Android 2.1 или выше

  WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

Ответ 5

Эти настройки работали для меня:

wv.setInitialScale(1);
wv.getSettings().setLoadWithOverviewMode(true);
wv.getSettings().setUseWideViewPort(true);
wv.getSettings().setJavaScriptEnabled(true);

setInitialScale (1) отсутствовал в моих попытках.

Хотя в документации указано, что 0 будет увеличивать масштаб, если setUseWideViewPort установлен в true, но 0 не работает для меня, и мне пришлось установить 1.

Ответ 6

Все, что вам нужно сделать, это просто

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

Ответ 7

Они работают для меня и соответствуют ширине экрана WebView:

// get from xml, with all size set "fill_parent"  
webView = (WebView) findViewById(R.id.webview_in_layout);  
// fit the width of screen
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 
// remove a weird white line on the right size
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);

Спасибо за советы и Белая линия в веб-дизайне eclipse

Ответ 8

У меня такая же проблема, когда я использую этот код

webview.setWebViewClient(new WebViewClient() {
}

так что вы можете удалить его в своем коде

И не забудьте добавить 3 режима ниже для вашего веб-просмотра.

    webview.getSettings().setJavaScriptEnabled(true);  
    webview.getSettings().setLoadWithOverviewMode(true);
    webview.getSettings().setUseWideViewPort(true);

это фиксирует размер на основе размера экрана

Ответ 9

WebView browser = (WebView) findViewById(R.id.webview);
browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);
browser.getSettings().setMinimumFontSize(40);

Это отлично работает для меня, так как размер текста был установлен на действительно маленький .setLoadWithOverViewMode и .setUseWideViewPort.

Ответ 10

В этом случае вы должны использовать HTML в своем webView. Я решил это, используя следующий код

webView.loadDataWithBaseURL(null,
                "<!DOCTYPE html><html><body style = \"text-align:center\"><img src= "
                        + \"http://www.koenvangorp.be/photos/2005_09_16-moon_2000.jpg\"
                        + " alt=\"pageNo\" width=\"100%\"></body></html>",
                "text/html", "UTF-8", null);

Ответ 11

Внесение изменений в ответ danh32 с display.getWidth(); теперь устарела.

private int getScale(){
    Point p = new Point();
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    display.getSize(p);
    int width = p.x; 
    Double val = new Double(width)/new Double(PIC_WIDTH);
    val = val * 100d;
    return val.intValue();
}

Затем используйте

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());

Ответ 12

Это похоже на проблему с XML. Откройте XML-документ, содержащий ваш веб-просмотр. Удалите код дополнений вверху.

Затем в макете добавьте

android:layout_width="fill_parent"
android:layout_height="fill_parent"

В веб-представлении добавьте

android:layout_width="fill_parent"
android:layout_height="fill_parent"

Это делает Web-View подходящим для экрана устройства.

Ответ 13

У меня было видео в HTML-строке, и ширина веб-просмотра была больше, чем ширина экрана, и это работает для меня.

Добавьте эти строки в строку HTML.

<head>
<meta name="viewport" content="width=device-width">
</head>

Результат после добавления кода выше в строку HTML:

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width">
</head>


</html>

Ответ 14

int PIC_WIDTH= webView.getRight()-webView.getLeft();

Ответ 15

Метод getWidth объекта Display устарел. Переопределите onSizeChanged, чтобы получить размер WebView, когда он станет доступным.

WebView webView = new WebView(context) {

    @Override
    protected void onSizeChanged(int w, int h, int ow, int oh) {

        // if width is zero, this method will be called again
        if (w != 0) {

            Double scale = Double.valueOf(w) / Double.valueOf(WEB_PAGE_WIDTH);

            scale *= 100d;

            setInitialScale(scale.intValue());
        }

        super.onSizeChanged(w, h, ow, oh);
    }
};

Ответ 16

webview.setInitialScale(1);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setJavaScriptEnabled(true);

будет работать, но не забудьте удалить что-то вроде:

<meta name="viewport" content="user-scalable=no"/>

если он существует в html файле или сменяет user-scaleable = yes, иначе он не будет.

Ответ 17

Это поможет настроить эмулятор в соответствии с веб-страницей:

WebView wb;
//CALL THIS METHOD
wb.setInitialScale(50);

Вы можете установить масштаб в процентах, как показано выше.

Ответ 18

В теории комбинация:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);

с

settings.setUseWideViewPort(false)

исправляет проблему, обертывая содержимое и устанавливая на экран. Но NARROW_COLUMNS устарел. Я советую вам прочитать эту тему ниже, которая подробно исследует проблему: https://code.google.com/p/android/issues/detail?id=62378

Ответ 19

здесь обновленная версия, не использующая устаревшие методы, основанная на ответе @danh32:

protected int getScale(Double contentWidth) {
    if(this.getActivity() != null) {
        DisplayMetrics displaymetrics = new DisplayMetrics();
        this.getActivity().getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        Double val = displaymetrics.widthPixels / contentWidth * 100d;
        return val.intValue();
    } else {
        return 100;
    }
}

использоваться одинаково:

int initialScale = this.getScale(420d);
this.mWebView.setInitialScale(initialScale);

Ответ 20

  • setLoadWithOverviewMode(true) - загружает WebView полностью уменьшенным
  • setUseWideViewPort(true) позволяет веб-представлению иметь нормальный видовой экран (например, обычный браузер на рабочем столе), тогда как при значении false веб-вид будет иметь видовой экран, ограниченный его собственными размерами (поэтому, если веб-вид 50px * 50px, область просмотра будет того же размера )

Узнайте больше здесь

У меня была ситуация, когда я не был владельцем WebView, а также я изменил размер WebView после того, как страница была закончена, в результате у меня был некоторый побочный эффект с масштабированием. Мое решение:

webView.post(new Runnable() {
    @Override
    public void run() {
        webView.getSettings().setLoadWithOverviewMode(true);
    }
});

Ответ 21

WebView webView = (WebView)findViewById(R.id.web_view);
webView.setInitialScale((int) getResources().getDimension(R.dimen._50sdp)); // getActivity(). if you are at Fragment
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.loadDataWithBaseURL(null,here comes html content,"text/html","UTF-8", null);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDisplayZoomControls(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);