Android WebView масштабирование текста для разных экранов и версии ОС - PullRequest
1 голос
/ 02 апреля 2012

Доброе утро, ребята, у меня есть приложение, предназначенное для работы как на смартфоне, так и на планшете. Когда он запускается на планшете, я хочу увеличить текст моего веб-просмотра, чтобы позволить пользователям лучше читать текст и заполнить все пустое пространство, если это возможно.

Этот код, который я использую для этого трюка:

//Webview Zoom
            if( UIUtils.isTablet(getActivity())) {
                if(UIUtils.isICS()) {
                    webView.getSettings().setTextZoom(130);
                } else {
                    int currentTextSizeIndex = lyricsView.getSettings().getTextSize().ordinal();
                    if ( currentTextSizeIndex+1 < lyricsView.getSettings().getTextSize().values().length )
                        webView.getSettings().setTextSize( lyricsView.getSettings().getTextSize().values()[currentTextSizeIndex+1] );
                }
            }

Поэтому я проверяю, нахожусь ли я на планшете, и проверяю, какую версию ОС использует пользователь. Фактически из API Level 14 я могу использовать setTextZoom , который позволяет мне устанавливать масштаб текста в процентах (по умолчанию 100). Это решение намного более масштабируемо, потому что я могу, например, дать пользователю возможность увеличивать или уменьшать текст по своему усмотрению с +10 или -10 процентами шага.

До API уровня 14 я должен использовать setTextSize , в котором в качестве параметра используется enum (по умолчанию NORMAL). TextSize - это Enum для указания размера текста. МАЛЕНЬКИЙ это 50% МАЛЕНЬКИЙ это 75% НОРМАЛЬНЫЙ это 100% БОЛЬШОЙ это 150% БОЛЬШОЙ это 200%

Так что я могу использовать только эти 5 абонентов, и это не так масштабируемо (но это единственный способ предоставить эту функцию 90% телефонов, которые не имеют ICS: D).

Проблема в том, что webView.getSettings().setTextSize(TextSize.LARGER); действует по-разному, когда я показываю текстовое представление на разных планшетах, и это действительно не нормально.

В данный момент я тестирую на Samsung Galaxy Tab и Kindle Fire. Вот технические характеристики GSMArena:

Samsung P1000 Galaxy Tab

Дисплей
Тип TFT емкостный сенсорный экран, 16M цветов

Размер 600 x 1024 пикселей, 7,0 дюймов (плотность пикселей ~ 170 ppi)

Amazon Kindle Fire

Дисплей
Тип IPS TFT емкостный сенсорный экран, 16M цветов

Размер 1024 x 600 пикселей, 7,0 дюймов (плотность пикселей ~ 170 ppi)

Как вы можете видеть, они имеют одинаковое разрешение, дюймы и ppi! Теперь я покажу вам 2 снимка экрана (одного и того же контента веб-просмотра) с этих устройств, чтобы вы понимали, о чем я говорю.

KindleFire: Kindle Fire Webview with webView.getSettings().setTextSize(TextSize.LARGER)

Galaxy Tab: Samsung Galaxy Tab Webview with webView.getSettings().setTextSize(TextSize.LARGER)

На вкладке Galaxy с textSize LARGE текст слишком велик, и его сложно увидеть. Так что для такого типа устройств лучше по умолчанию показывать НОРМАЛЬНЫЙ текст (и позволить пользователю выбирать, если его больше). Но как узнать, какой текстовый размер по умолчанию лучше всего отображать? Потому что NORMAL подходит для Galaxy Tab и слишком мал для Kindle Fire, а LARGE слишком велик для Galaxy Tab, но идеально подходит для Kindle. Я делаю тест только на этих двух устройствах, но я должен поддерживать все планшеты. Я должен найти какие-то параметры, различия в устройствах, чтобы сказать: хорошо, на этом устройстве, потому что разрешение маленькое, я поставлю больше / Нормальный, вместо этого, потому что это больший результат, я могу поставить его больше (вроде).

Вы когда-нибудь сталкивались с этой проблемой? Как я могу решить это?

Ответы [ 3 ]

5 голосов
/ 08 октября 2012

Мы видели подобные проблемы в нашем приложении (в общем, не только в WebViews).

Оригинальный Samsung Galaxy Tab неправильно сообщает о себе как о значении hdpi. Другие планшеты с таким же размером экрана (7 дюймов) и разрешением (1024x600) правильно отображают данные с высоким разрешением. Эти «правильные» планшеты включают в себя Kindle Fire, Nook Tablet и даже Samsung Galaxy Tab 2! Я ожидаю, что HTC Flyer сделает то же самое, но я не пробовал.

В одном сообщении блога Google утверждал, что это было дизайнерское решение, принятое Samsung:

http://android -developers.blogspot.co.uk / 2010/09 / screen-geometry-fun.html (поиск «сюрприз»)

В другом они утверждали, что это было ошибкой:

http://android -developers.blogspot.co.uk / 2011/07 / new-tools-for-manage-screen-sizes.html (Поиск "интересного").

В любом случае, оригинальная Galaxy Tab является исключением, и этого больше нельзя допустить.

Я рекомендую использовать на Fire все, что выглядит лучше всего, поскольку это должно хорошо работать на всех 7-дюймовых планшетах, кроме оригинальной Galaxy Tab. Если вы тоже можете сделать так, чтобы это выглядело приемлемо, то это хороший бонус.

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

0 голосов
/ 02 апреля 2012

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

0 голосов
/ 02 апреля 2012

Посмотрите на это: Ориентация экранов из веб-приложений , окно просмотра должно помочь вам

...