Как установить начальный масштаб / ширину для веб-просмотра - PullRequest
Новая
       13

Как установить начальный масштаб / ширину для веб-просмотра

73 голосов
/ 28 сентября 2010

Я пытаюсь заставить WebView работать так же, как браузер Android. Браузер открывает все страницы так, чтобы их ширина соответствовала ширине экрана. Однако стандартное поведение WebView - запуск в масштабе 100% пикселей, поэтому он начинает увеличиваться в левом верхнем углу.

Последние пару часов я пытался найти способ заставить WebView масштабировать страницу до экрана, как это происходит в браузере, но мне не повезло. Кто-нибудь нашел способ сделать это?

Я вижу, это настройка с именем setLoadWithOverviewMode, но, похоже, она вообще ничего не делает. Я также экспериментировал с setInitialScale, но на разных размерах экрана и размерах веб-страниц, которые не будут такими изящными, как масштабирование браузеров.

Есть ли у кого-либо ведет?

Спасибо

РЕДАКТИРОВАТЬ: метод Брайана, кажется, работает, когда телефон в альбомной, но не в портретной. В портретной ориентации он близок, но по-прежнему не умещается на весь экран на странице. Я начал эту награду с надеждой, что есть надежный способ получить начальный масштаб, чтобы страница соответствовала ширине страницы в любой ориентации или размере экрана.

Ответы [ 7 ]

155 голосов
/ 01 декабря 2010

Следующий код загружает настольную версию домашней страницы Google, полностью уменьшенную для соответствия webview для меня в Android 2.2 на экране 854x480 пикселей. Когда я переориентирую устройство и оно перезагружается в книжной или альбомной ориентации, ширина страницы полностью соответствует представлению каждый раз.

BrowserLayout.xml: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

     <WebView android:id="@+id/webview"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent" />
</LinearLayout>

Browser.java: 

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class Browser extends Activity {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.BrowserLayout);

        String loadUrl = "http://www.google.com/webhp?hl=en&output=html";

        // initialize the browser object
        WebView browser = (WebView) findViewById(R.id.webview);

        browser.getSettings().setLoadWithOverviewMode(true);
        browser.getSettings().setUseWideViewPort(true);

        try {
            // load the url
            browser.loadUrl(loadUrl);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
20 голосов
/ 06 июля 2011

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

    browser.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
    browser.setScrollbarFadingEnabled(false);

Это приводит к тому, что полоса прокрутки не занимает пространство макета, и позволяет веб-странице заполнять область просмотра.

Надеюсь, это поможет

13 голосов
/ 05 февраля 2013

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

Отличный ответ, опубликованный Брайаном, не работает для меня в Jelly Bean. Я должен также добавить: 

browser.setInitialScale(30);

Параметр может быть любым процентом, который приводит к тому, что измененный размер контента меньше ширины веб-просмотра. Затем setUseWideViewPort (true) расширяет ширину содержимого до максимальной ширины веб-просмотра.

7 голосов
/ 28 сентября 2010

Попробуйте с использованием широкого окна просмотра : 

 webview.getSettings().setUseWideViewPort(true);
3 голосов
/ 28 июня 2011

// для изображений и видео SWF используйте ширину как "100%" и высоту как "98%" 

mWebView2.getSettings().setJavaScriptEnabled(true);
mWebView2.getSettings().setLoadWithOverviewMode(true);
mWebView2.getSettings().setUseWideViewPort(true);
mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView2.setScrollbarFadingEnabled(true);
1 голос
/ 06 февраля 2016

Я работаю с загрузкой изображений для этого ответа и хочу, чтобы они масштабировались до ширины устройства. Я считаю, что для старых телефонов с версиями ниже API 19 (KitKat) поведение ответа Брайана не совсем то, что мне нравится. Это создает много пробелов вокруг некоторых изображений на старых телефонах, но работает на моем новом. Вот мой вариант, с помощью этого ответа: Может ли Android WebView автоматически изменять размеры огромных изображений? Алгоритм макета SINGLE_COLUMN устарел, но он работает, и я чувствую, что он подходит для работы со старыми веб-представлениями. 

WebSettings settings = webView.getSettings();

// Image set to width of device. (Must be done differently for API < 19 (kitkat))
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
    if (!settings.getLayoutAlgorithm().equals(WebSettings.LayoutAlgorithm.SINGLE_COLUMN))
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
} else {
    if (!settings.getLoadWithOverviewMode()) settings.setLoadWithOverviewMode(true);
    if (!settings.getUseWideViewPort()) settings.setUseWideViewPort(true);
}
0 голосов
/ 20 февраля 2019

Если у вас есть веб-представление, но ваши изображения по-прежнему не в масштабе, лучшее решение, которое я нашел ( здесь ), - это просто предварять документ следующим образом: 

<style>img{display: inline; height: auto; max-width: 100%;}</style>

В результате все изображения масштабируются в соответствии с шириной веб-представления.

...