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"/>

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

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


android webview android-webview scaling
person SWDeveloper    schedule 12.10.2010    source источник

Ответы (21)


arrow_upward
88
arrow_downward

Вы должны рассчитать масштаб, который вам нужно использовать вручную, а не устанавливать значение 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());
person danh32    schedule 12.10.2010
comment
Спасибо за ваш ответ, вы правы, это работает. но у меня другая проблема. Я не загружаю изображение, загружаю веб-страницу в веб-просмотре. Итак, как узнать ширину веб-страницы (PIC_WIDTH). - person SWDeveloper; 13.10.2010
comment
Ах, я пропустил эту константу там. Извини за это. Я не уверен, как вы можете получить ширину фактической веб-страницы. - person danh32; 13.10.2010
comment
PIC_WIDTH была константой, которую я знал заранее, так как я просто отображал одно изображение из папки с ресурсами. Как я уже сказал выше, я не знаю, как вы можете получить ширину фактической веб-страницы. - person danh32; 08.02.2012
comment
а как же высота? У планшетов Android такое же соотношение? - person MartinC; 22.10.2013
comment
stackoverflow.com/questions/21620732/ вы можете мне помочь/ - person Mahesh; 07.02.2014
comment
Это решение определенно лучшее решение. До этого я использую код javascript для изменения тега метапорта представления. Этот тег используется после загрузки страницы, и это приводит к некоторым задержкам, однако я решил проблему с задержкой. - person burakim; 12.06.2015
comment
каким будет ожидаемое значение PIC_WIDTH - person Maheshwar Ligade; 23.06.2016
comment
@MaheshwarLigade я использую PIC_WIDTH = 360 - person Nicholas Ng; 29.07.2016
comment
@danh32 danh32 скажи значение PIC_WIDTH ... так как 360 мне не подходит. - person Maveňツ; 04.01.2017
comment
@ danh32 danh32 Может ли плотность масштаба (hdpi, mdpi) влиять на расчет масштаба? - person Abhinav Saxena; 04.08.2017

arrow_upward
308
arrow_downward

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

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

это исправляет размер в зависимости от размера экрана.

person Tushar Vengurlekar    schedule 20.09.2011
comment
Это упирается в экран, но больше не позволяет увеличивать/уменьшать масштаб. Можно ли решить эту проблему? Я знаю, что это возможно на IOS. - person AlexAndro; 20.03.2012
comment
stackoverflow.com/questions/21620732/ вы можете мне помочь? - person Mahesh; 07.02.2014
comment
у меня эти настройки работают, но только по ширине, в тех же случаях теперь обрезается высота - person albanx; 29.10.2015
comment
Это лучшее решение для достижения этой цели, которое я нашел до сих пор. - person fragon; 24.11.2015
comment
Тот факт, что решение встроено, действительно покоряет меня. - person Daniel Handojo; 29.01.2016
comment
Чтобы добавить масштаб, добавьте следующее: webview.getSettings().setBuiltInZoomControls(true); webview.getSettings().setDisplayZoomControls(false); - person Andrew; 17.10.2017
comment
@albanx что ты сделал для роста? любое решение? - person Arnold Brown; 18.05.2019

arrow_upward
38
arrow_downward

Друзья,

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

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 из-за вида устройств от компании. Но я исправил свою проблему, используя часть информации от каждого из них.

Спасибо!

person Josmar Peixe    schedule 29.02.2012
comment
Тогда масштабирование больше не работает. Я один с этой проблемой? - person testing; 10.03.2016
comment
@testing ты нашел какое-нибудь решение? - person Anshul Tyagi; 10.06.2016
comment
@AnshulTyagi: Нет, не знал. Поскольку для меня это был тестовый проект, я не стал вдаваться в подробности. Дайте мне знать, если вы найдете что-то! - person testing; 10.06.2016
comment
@AnshulTyagi: для веб-страниц этот подход работает для меня. Для изображений я должен использовать что-то другое... - person testing; 28.09.2016

arrow_upward
33
arrow_downward

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

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

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

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

person Doc    schedule 30.05.2012
comment
Я не устанавливал начальную шкалу, и она работала у меня годами. (я просто устанавливал режим обзора и область просмотра). Но новое устройство, с которым я только что столкнулся, казалось, начало увеличиваться, пока страница не обновилась. Установка начального масштаба исправила это для меня. - person IAmGroot; 18.10.2019

arrow_upward
25
arrow_downward

Попробуйте с помощью этих советов по HTML5

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

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

  WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
person josebetomex    schedule 15.02.2012
comment
к сожалению, они устарели, и это решение не помогло мне на Galaxy S5. - person 2cupsOfTech; 10.06.2014

arrow_upward
16
arrow_downward

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

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
person Muhammad Aamir Ali    schedule 17.07.2014
comment
У меня сработало и без setLayoutAlgorithm - person user365314; 19.01.2021

arrow_upward
14
arrow_downward

Они работают для меня и соответствуют ширине экрана 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

person Nezneika    schedule 01.11.2012
comment
Кажется, что SINGLE_COLUMN устарел сейчас вебкит/ - person Alexander Abramov; 07.03.2013

arrow_upward
12
arrow_downward

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

webview.setWebViewClient(new WebViewClient() {
}

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

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

это исправляет размер в зависимости от размера экрана

person Linh    schedule 06.08.2015
comment
@shahzainali, вы можете увеличить масштаб веб-просмотра? - person Anshul Tyagi; 10.06.2016
comment
@AnshulTyagi Нет, это не масштабирование. - person Shahzain ali; 10.06.2016

arrow_upward
8
arrow_downward

У меня было видео в строке 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>
person Biljana Divljak    schedule 05.04.2018

arrow_upward
7
arrow_downward 

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

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

person Steve    schedule 20.03.2014

arrow_upward
5
arrow_downward

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

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);
person Qadir Hussain    schedule 09.01.2013
comment
Я думаю, лучше использовать px или vh вместо %. % в фреймах имеют некоторые ошибки при изменении ориентации - person Siarhei; 25.10.2017

arrow_upward
5
arrow_downward

Внесение изменений в ответ 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());
person Ducktales    schedule 03.04.2015
comment
Я рассчитал, что масштаб должен быть ‹ 1 или 100%, поэтому я сравнил свою ширину с PIC_WIDTH, чтобы получить соотношение. Более того, я также вычел некоторые дополнения. - person Abhinav Saxena; 26.06.2017

arrow_upward
4
arrow_downward

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

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

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

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

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

Это позволяет Web-View соответствовать экрану устройства.

person ZakiHacky    schedule 19.10.2015
comment
это то, что экономит мое время. - person Kabkee; 22.07.2017
comment
fill_parent устарел, используйте match_parent. - person Trevor Hart; 04.03.2018

arrow_upward
3
arrow_downward 

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

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

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

если существует в html-файле, или измените user-scalable=yes, иначе этого не произойдет.

person Hoang Nguyen Huu    schedule 18.10.2013

arrow_upward
2
arrow_downward

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

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

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

person jagadeesh    schedule 07.12.2011

arrow_upward
2
arrow_downward

Метод 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);
    }
};
person SharkAlley    schedule 01.02.2013
comment
Как получить WEB_PAGE_WIDTH? - person testing; 28.09.2016
comment
Если вы пытаетесь масштабировать некоторый контент с фиксированной шириной, чтобы он соответствовал размеру экрана, вам следует заранее знать ширину вашего контента. Имеет ли это смысл? - person SharkAlley; 30.09.2016
comment
Хорошо, это должно работать для изображений. Но для веб-страниц (которые могут быть адаптивными) это может быть любая ширина, например, 320 пикселей. - person testing; 03.10.2016

arrow_upward
1
arrow_downward

Теоретически комбинация:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);

с участием

settings.setUseWideViewPort(false)

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

person Alécio Carvalho    schedule 03.06.2014

arrow_upward
1
arrow_downward

вот обновленная версия, не использующая устаревшие методы, основанная на ответе @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);
person Martin Zeitler    schedule 10.10.2018

arrow_upward
1
arrow_downward

Для справки, это реализация Kotlin решения @danh32:

private fun getWebviewScale (contentWidth : Int) : Int {
    val dm = DisplayMetrics()
    windowManager.defaultDisplay.getRealMetrics(dm)
    val pixWidth = dm.widthPixels;
    return (pixWidth.toFloat()/contentWidth.toFloat() * 100F)
             .toInt()
}

В моем случае ширина определялась тремя изображениями как 300 пикселей, поэтому:

webview.setInitialScale(getWebviewScale(300))

Мне понадобилось несколько часов, чтобы найти этот пост. Спасибо!

person steven smith    schedule 16.06.2020

arrow_upward

arrow_downward

person    schedule
comment
getRight и getLeft всегда возвращают 0 для меня - person yrazlik; 30.12.2014

arrow_upward

arrow_downward

person    schedule
comment
Пожалуйста, не публикуйте два ответа с одинаковым содержанием только из-за отрицательных голосов. - person techydesigner; 10.09.2016
comment
И, пожалуйста, отформатируйте свой код, потратив немного усилий! Почему ты так сильно сместил его вправо? Слишком много времени, чтобы удалить пробел? - person Massimiliano Kraus; 02.12.2016