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


103

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

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

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

Может кто подскажет, как это получить?

Ответы:


82

Вы должны рассчитать масштаб, который вам нужно использовать вручную, а не устанавливать значение 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());

7
Спасибо за ответ, верно, это работает. но у меня другая проблема. Я не загружаю изображение, загружаю веб-страницу в веб-просмотре. Итак, как узнать ширину веб-страницы (PIC_WIDTH).
SWDeveloper,

1
Ах, я пропустил там эту константу. Извини за это. Я не уверен, как можно получить ширину реальной веб-страницы.
danh32

54
Что здесь PIC_WIDTH?
Пареш Майани 08

4
PIC_WIDTH - это константа, которую я знал заранее, поскольку я просто отображал одно изображение из папки с ресурсами. Как я уже сказал выше, я не знаю, как узнать ширину реальной веб-страницы.
danh32

1
@MaheshwarLigade, я использую PIC_WIDTH = 360
Николас Нг,

292

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

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

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


4
Это опора на экран, но больше не позволяет увеличивать / уменьшать масштаб. Можно ли улучшить эту проблему? Я знаю, что это возможно на IOS.
AlexAndro

1
эти настройки работают для меня, но только для ширины, в тех же случаях теперь он
обрезает

1
Это лучшее решение, которое я нашел до сих пор.
fragon

1
Тот факт, что решение является встроенным, действительно меня подкупает.
Daniel Handojo

3
Чтобы добавить масштаб, добавьте следующее: webview.getSettings (). SetBuiltInZoomControls (true); webview.getSettings (). setDisplayZoomControls (ложь);
Эндрю

34

Друзья,

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

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

Спасибо вам!


Тогда масштабирование больше не работает. Я единственный с этой проблемой?
тестирование

@testing вы получили какое-нибудь решение?
Anshul Tyagi

@AnshulTyagi: Нет, не знал. Поскольку для меня это был тестовый проект, я больше не исследовал его. Дай мне знать, если найдешь что-нибудь!
тестирование

@AnshulTyagi: Мне подходит этот подход для веб-страниц . Для изображений я должен использовать что-то другое ...
тестирование

31

У меня сработали следующие настройки:

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

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

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


1
Я не устанавливал исходную шкалу, и она работала у меня годами. (я просто устанавливал режим обзора и область просмотра). Но новое устройство, с которым я столкнулся, казалось, начало увеличиваться, пока страница не обновилась. Установка начального масштаба исправила это для меня.
IAmGroot


15

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

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

13

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


3
Похоже, что SINGLE_COLUMN устарел developer.android.com/reference/android/webkit/…
Александр Абрамов

11

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

webview.setWebViewClient(new WebViewClient() {
}

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

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

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


2
@shahzainali, вы можете масштабировать веб-просмотр?
Anshul Tyagi

@AnshulTyagi Нет, не зум.
Shahzain Ali

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

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


6

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

5

В этом случае вы должны использовать 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);

Я думаю, лучше использовать px ot vh вместо%. % в iframe содержат ошибки при изменении ориентации
Сергей

4

Внесение изменений в ответ с помощью 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());

Я подсчитал, что масштаб должен быть <1 или 100%, поэтому я сравнил свою ширину с PIC_WIDTH, чтобы получить соотношение. Более того, я также убрал отступы.
Abhinav Saxena

4

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

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

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

В веб-просмотре добавьте

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

Благодаря этому Web-View умещается на экране устройства.


это то, что экономит мое время.
Kabkee

2
fill_parent устарело, используйте match_parent.
Trevor Hart

3
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, иначе не будет.



2

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

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

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


2

Метод 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);
    }
};

Как вы попали WEB_PAGE_WIDTH?
тестирование

Если вы пытаетесь масштабировать некоторый контент с фиксированной шириной, чтобы он соответствовал экрану, вы должны заранее знать, насколько широк ваш контент. Имеет ли это смысл?
SharkAlley

Хорошо, это должно работать для изображений. Но для веб-страниц (которые могут быть отзывчивыми) это может быть любая ширина, например> 320 пикселей.
тестирование

1

Теоретически сочетание:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); 

с участием

settings.setUseWideViewPort(false)

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


1

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

0

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

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

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


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

Пожалуйста, не публикуйте два ответа с одинаковым содержанием только из-за голосов против.
techydesigner

И, пожалуйста, отформатируйте свой код, приложив немного усилий! Почему вы так сильно отступили вправо? Слишком много времени, чтобы удалить пустое пространство?
Массимилиано Краус
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.