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.