Подтвердить что ты не робот

Сделать веб-просмотр в планшете симулируйте небольшое устройство

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

Я использую webview для отображения веб-сайта. Этот веб-просмотр занимает всю область экрана. Есть ли способ заставить webview имитировать небольшое устройство?

enter image description here

Я не совсем понял из документов, какая комбинация опций (getLoadWithOverviewMode, setUseWideViewPort, setDefaultZoom) заставит меня достичь того, чего я хочу. Любая помощь будет оценена.

Обс: Я уже пробовал установить масштаб текста (setTextZoom(int)). Это немного улучшилось, но не так хорошо, как на смартфоне.

Obs2: я не может изменить веб-сайт.: (

UPDATE:

Если я изменил ширину веб-просмотра до 720 px, страница html изменится на макет мобильного телефона и отобразится красиво. Теперь я хочу сделать это, но сохраняя webview с полной шириной. Как обман html-страницы, чтобы думать, что ширина веб-просмотра меньше, чем она есть на самом деле.

Обз: Масштаб не работает. На странице html он не включен. И я думаю, что это не очень хороший способ, поскольку масштаб не изменяет воспринимаемый размер веб-просмотра.

4b9b3361

ОТВЕТЫ

Ответ 1

Обновление. Если у вас есть новый API ( > 18), вы можете взглянуть на заметку в конце этого вопроса.

После битвы совсем немного, я нашел решение!

Решение не было в зомбинге. Масштаб не был включен для html-страницы, и это не повлияло на размер, воспринимаемый html.

Я получил его, опустив ширину веб-просмотра:

ViewGroup.LayoutParams webviewLayoutParameters = mWebView.getLayoutParams();

webviewLayoutParameters.width = (int) (760);
webviewLayoutParameters.height =(int) (webviewHeight);
mWebView.setLayoutParams(webviewLayoutParameters);

Затем, поскольку на странице был стиль, который изменился для размеров экрана ниже 768 пикселей, он стал выглядеть по-другому. Намного лучше.

Но затем я хотел увеличить этот небольшой веб-просмотр, чтобы он мог поместиться на весь экран. Для этого я использовал scaleX и scaleY.

Это мое полное замечательное решение:

// First, get the current screen size
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int displayWidth = size.x;
int displayHeight = size.y;

//Then, set the amount you want to make your screen smaller. This means that it will comunicate to the HTML that its 20% smaller than it really is
float amplification_ratio = (float) 0.20;

// Shrink webview size
ViewGroup.LayoutParams webviewLayoutParameters = mWebView.getLayoutParams();
webviewLayoutParameters.width = (int) (displayWidth*(1-amplification_ratio));
webviewLayoutParameters.height =(int) (displayHeight*(1-amplification_ratio));
mWebView.setLayoutParams(webviewLayoutParameters);

// Now scale it the inverse ammount so it will take the full screen.
mWebView.setScaleX(1/(1 - amplification_ratio));
mWebView.setScaleY(1/(1 - amplification_ratio));

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

Obs: HTML-страница была сделана в бутстрапе и имела только классы для устройств bootstrap -xs. Поэтому мне пришлось имитировать экран меньше 768 пикселей.

Obs2 (обновление): Именование этой процедуры

Я реализовал это в своем приложении, протестировал его (модель и интеграция), и теперь он работает на производстве. Чтобы создать функции и переменные, я должен был назвать эту процедуру. Что это значит, так это увеличение размера пикселя webview. Таким образом, веб-просмотр по-прежнему будет занимать весь экран, но он будет иметь меньшую ширину в пикселях.

С учетом этого любое имя типа pixelEnlargementFactor, pixelMagnificationRatio или pixelSizeMultiplicator будет хорошим именем.

UPDATE:

ВНИМАНИЕ: Используйте метод выше только в определенных случаях!

У меня была старая версия API (15) и была RelativeLayout со многими опциями. Тогда setInitialScale(120) не работал так, как я хотел.

Теперь я изменил свой API на 19 и мой макет на более простой FrameLayout с меньшим количеством опций. Теперь команда setInitialScale(120) вместе с mWebView.getSettings().setUseWideViewPort(false) выполнила все, что я сделал ранее, с гораздо меньшим количеством кода.