Правильное масштабирование веб-сайта на устройствах Android через WebView

Мое приложение представляет собой простой «обертку» WebView которая отображает веб-страницу в фиксированной ландшафтной ориентации, страница имеет центрированный div размером 760 пикселей и высотой 415 пикселей, и это должно отображаться на всех устройствах, чтобы оно (грубо) соответствовало экрану , Пользователь не может изменить масштабирование … У меня почти все работает отдельно от масштабирования.

У меня есть следующий метатег для просмотра на странице:

 <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

WebView манифест для обертки WebView .apk которую я создал, выглядит следующим образом:

 <supports-screens android:smallScreens="true" android:normalScreens="true" android:largeScreens="true" android:anyDensity="true" /> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name="{my name}" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> 

Я должен отметить, что изначально целью .apk был Android 2.2, и я недавно изменил до 2.3.1 и добавил еще одну строку в манифест, но это ничего не меняет:

 android:xlargeScreens="true" 

Я добавил следующий код .java :

 webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY); webview.setScrollbarFadingEnabled(false); webview.getSettings().setSupportZoom(false); webview.getSettings().setBuiltInZoomControls(false); setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); 

Для целей этого вопроса просто предположим, что единственным содержимым всего сайта является <div> :

 <div style="margin: auto; position:relative; align:center; top:0px; width:760px; height:415px; background-color:#000000"> 

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

Я пробовал это на трех разных устройствах, одном планшете и двух телефонах, и есть большой пробел слева, справа и внизу слоя <div> . Похоже, что ширина 760px имеет примерно 50px-зазор с обеих сторон и то же самое внизу на каждом из устройств, все, что я хочу сделать, это масштабировать, чтобы он грубо заполнял экран на всех устройствах.

Мой телефон говорит, что у него есть window.innerWidth 854 с window.devicePixelRatio 1.5, и если я изменю начальный и максимальный масштаб до 1.12, слой <div> идеально подходит для моего устройства. В таблице указано, что у него есть window.innerWidth 980 с window.devicePixelRatio 1.0 и похоже на шкалу около 1,27. Я не знаю деталей третьего устройства, но использование 1.1, похоже, делает трюк.

Конечно, изменение начального масштабирования – это не решение, и даже попытка его будет полным кошмаром, поэтому, скрестив пальцы, может ли кто-нибудь сказать мне ослепительно очевидную вещь, которую мне не хватает, что сделает эту работу? Или я просто прошу невозможное автоматически масштабировать представление до фиксированного размера <div> ?

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

Это грубо, но он выполняет эту работу, я удалил метатег с сайта и добавил его в приложение:

 // Set up up the scaling value float scaling = 100; int display_width; DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); display_width = dm.widthPixels; scaling = (((float)display_width/760)*100); // 760 here is my container div width scaling = (int) Math.floor(scaling); // Set up the webview and apply the scale value webview = (WebView) findViewById(R.id.webview); webview.setInitialScale((int)scaling); 

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

Во-первых, удалив метатег, я, похоже, удалил ограничение на максимальный / минимальный масштаб, это означает, что нажатие на любой элемент <INPUT> отображающий клавиатуру Android, приведет к изменению масштаба. К счастью, добавление этой строки в код решает эту проблему:

 webview.getSettings().setDefaultZoom(ZoomDensity.FAR); 

Во-вторых, у меня нет работоспособного решения и что некоторые устройства, такие как планшет Archos101, имеют программные кнопки вместо аппаратных кнопок. Здесь код масштабирования будет масштабироваться до ширины устройства, а это значит, что сайт находится под программными кнопками … В настоящее время мы думаем о внедрении решения на основе READ_PHONE_STATE или, возможно, добавляем возможность выйти из приложения без аппаратных кнопок и добавить это в манифест :

 <uses-permission android:name="archos.permission.FULLSCREEN.FULL" /> 

Надеюсь, кто-то еще найдет это и сэкономит некоторое время.

Intereting Posts
В Android-браузере Android, когда я запускаю javascript, sotfkeyboard исчезает Выбор даты / времени не отображается в приложении Android 4.1.2 EditText android: подсказка не исчезает onFocus Как повернуть прямоугольник, нарисованный на холсте в Android? Насколько безопасно внутреннее хранилище? Статические данные, сохраненные внутри singleton, иногда имеют значение null при возврате в приложение из фона Marsmallow: изменение разрешений при запуске приложения с ошибками Не удается запустить контрольно-измерительные тесты после ввода данных Android HttpUrlConnection делает POST вместо GET Почему камера не запускается при запуске моего приложения Android с обновленной версией? Как отключить экран в эмуляторе Android? Получить доступ к USB-накопителю в Android Как создать автоответчик для Android Android Лучший способ обнаружить и обработать пользователя НЕАКТИВНОСТЬ AWS Cognito в сочетании с Android Account Manager для нескольких учетных записей