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

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

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

SWDeveloper
источник

Ответы:

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

Спасибо вам!

Josmar Peixe
источник
Тогда масштабирование больше не работает. Я единственный с этой проблемой?
тестирование
@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
25

Попробуйте воспользоваться этими советами HTML5

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

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

  WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
жозебетомекс
источник
2
к сожалению, они устарели, и это решение не
помогло
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 умещается на экране устройства.

ZakiHacky
источник
это то, что экономит мое время.
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
int PIC_WIDTH= webView.getRight()-webView.getLeft();
Джон
источник
1
getRight и getLeft всегда возвращают 0 для меня
yrazlik
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);
    }
};
SharkAlley
источник
Как вы попали 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
И, пожалуйста, отформатируйте свой код, приложив немного усилий! Почему вы так сильно отступили вправо? Слишком много времени, чтобы удалить пустое пространство?
Массимилиано Краус