Блог

Главная - Вопросы по программированию - Устройства просмотра не работают в мобильном приложении Cordova

Устройства просмотра не работают в мобильном приложении Cordova

#android #css #cordova #responsive-design #hybrid-mobile-app

#Android #css #кордова #адаптивный дизайн #гибрид-мобильное приложение

Вопрос:

Я пытаюсь адаптировать адаптивный веб-дизайн к своему приложению, чтобы оно адаптировалось к нескольким экранам. Поэтому я использовал единицы просмотра (vw и vh) в своем css для каждой вещи, от размера шрифта до поля. Но cordova webview не поддерживает модули просмотра. Я застрял здесь.

есть ли какой-либо способ обойти, чтобы заставить устройства vh и vw работать в cordova webview? или есть какой-либо другой способ получить адаптивный веб-дизайн для моего приложения, чтобы я мог выпускать его на нескольких экранах (Android).

заранее спасибо.

Ответ №1:

У меня есть обходной путь js, он отлично работает в приложении cordova

код:

var w=$(window).width()/100;
var h=$(window).height()/100;
function vw( val ) {
return w*val 'px';
}
function vh( val ) {
return h*val 'px';
}
$('.header p').css({
fontSize: vw(4),
marginTop: vh(2)
});

просто, не так ли?

Комментарии:

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

2. @Franva вы можете использовать медиа-запросы и некоторые другие обходные пути js (например, определение разрешения экрана) для размещения компонентов пользовательского интерфейса на экране разных размеров (разных разрешений экрана).

3. привет, спасибо за ваш ответ. но на веб-сайте уже используется bootstrap css. Это работает, когда я открываю веб-сайт непосредственно в мобильном браузере, но не работает после того, как я использовал Cordova, чтобы превратить его в гибридное приложение, а также запустить на Android mobile. У вас есть какие-либо идеи? Спасибо

Ответ №2:

если вы пытались:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

тогда попробуйте это:

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Комментарии:

1. попробуйте это <meta name=»viewport» content=»width=ширина устройства, начальный масштаб = 1,0, максимальный масштаб = 1,0, целевая плотность точек на дюйм = средний dpi, масштабируемый пользователем = 0″ />

2. он тоже не работает, что я изначально использовал, было <meta name=»viewport» content=»масштабируемый пользователем = нет, начальный масштаб = 1, максимальный масштаб = 1, минимальный масштаб = 1, ширина = ширина устройства, высота = высота устройства, целевая плотность точек / дюйм= устройство-dpi»/> и я тестирую это на своем телефоне с Android 4.0 ICS. есть ли какое-либо отношение к телефону.

Ответ №3:

Насколько я понимаю, некоторые более ранние версии Android и IOS не поддерживают устройства просмотра http://caniuse.com/viewport-units

Ответ №4:

Я бы использовал их вместо блоков просмотра и добавил бы некоторые медиа-запросы к тегу html для управления размером шрифта. Единица «em» является относительной, поэтому, если я изменю размер шрифта в html, он будет масштабировать размер шрифта для своих дочерних элементов

Метки: