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?
— Paresh Mayani

4
PIC_WIDTH - це константа, яку я знав заздалегідь, оскільки я просто відображав одне зображення з папки активів. Як я вже говорив вище, я не знаю, як можна отримати ширину фактичної веб-сторінки.
— danh32

1
@MaheshwarLigade я використовую PIC_WIDTH = 360
— Nicholas Ng

292

Ви можете використовувати це

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

це визначає розмір залежно від розміру екрана.


4
Це піднімає екран, але більше не дозволяє збільшувати / зменшувати масштаб. Чи може ця проблема бджоли покращитися? Я знаю, що це можливо на IOS.
— AlexAndro

1
ці налаштування працюють для мене, але тільки для ширини, в тих же випадках тепер він
— обрізає

1
Це найкраще рішення для досягнення цього, я знайшов поки що.
— fragon

1
Те, що вбудовано рішення, насправді перемагає мене.
— Даніель Хандохо

3
Для збільшення масштабування додайте наступне: webview.getSettings (). SetBuiltInZoomControls (true); webview.getSettings (). setDisplayZoomControls (false);
— Андрій

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 Ви отримали якесь рішення?
— Аншул Тягі

@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
Я не встановлював масштаб, і він працював на мене роками. (я тільки встановлював режим огляду та вікно перегляду). Але новий пристрій, на який я щойно натрапив, здавалося, почав збільшувати масштаб, поки сторінка не оновилася. Налаштування інціальної шкали зафіксувало це для мене.
— Doomsknight


15

Все, що вам потрібно зробити, це просто

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

13

Вони працюють для мене і підходять для веб-перегляду на ширину екрана:

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

Спасибі вище поради та Біла лінія в затемненні веб-перегляду


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 Ви можете збільшити масштаб веб-перегляду?
— Аншул Тяги

@AnshulTyagi Ні, це не збільшує.
— шахзаїн алі

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.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 замість%. % у iframes мають деякі помилки щодо зміни орієнтації
— Siarhei

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, щоб отримати співвідношення. Більше того, я також відніс деякий накладки.
— Абхінав Саксена

4

Це здається проблемою XML. Відкрийте документ XML, що містить веб-перегляд. Видаліть код прокладки вгорі.

Потім у макеті додайте

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.
— Тревор Харт

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

буде працювати, але не забудьте видалити щось на кшталт:

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

якщо він існував у html-файлі або змінив масштабований користувачем = так, інакше не буде.


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

Як ви отримуєте WEB_PAGE_WIDTH?
— тестування

Якщо ви намагаєтесь масштабувати деякий вміст із фіксованою шириною, щоб відповідати екрану, то слід заздалегідь знати, наскільки широкий ваш вміст. Чи має це сенс?
— SharkAlley

Добре, це має працювати для зображень. Але для веб-сторінок (які можуть бути чуйними) це може бути будь-яка ширина> 320 пікселів, наприклад.
— тестування

1

Теоретично поєднання:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); 

з

settings.setUseWideViewPort(false)

виправляє проблему, загортаючи вміст і поміщаючи його на екран. Але NARROW_COLUMNS застарілий. Раджу прочитати цю тему нижче, яка детально вивчає проблему: https://code.google.com/p/android/isissue/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:

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.