Единицы области просмотра не работают в мобильном приложении Cordova

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

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

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


android cordova hybrid-mobile-app css responsive-design
person user3076847    schedule 26.06.2014    source источник

Ответы (4)


arrow_upward
3
arrow_downward

У меня есть обходной путь 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) });

просто не правда ли?

person user3076847    schedule 27.06.2014
comment
это решает проблему области просмотра, но как вы можете заставить компоненты пользовательского интерфейса перемещаться, чтобы соответствовать другому разрешению экрана? У меня сейчас аналогичная проблема. - person Franva; 08.08.2014
comment
@Franva, вы можете использовать медиа-запросы и некоторые другие обходные пути js (например, определение разрешения экрана) для размещения компонентов пользовательского интерфейса на экране разных размеров (разных разрешений экрана). - person user3076847; 08.08.2014
comment
привет, спасибо за ваш ответ. но на сайте уже используется bootstrap css. Это работает, когда я открываю веб-сайт непосредственно в мобильном браузере, но не работает после того, как я использовал Cordova, чтобы обернуть его как гибридное приложение, а также запустить на мобильном устройстве Android. У тебя есть идеи? Благодарность - person Franva; 09.08.2014

arrow_upward
1
arrow_downward

если вы пробовали:

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

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

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
person aashi    schedule 26.06.2014
comment
попробуйте это ‹meta name=viewport content=width=device-width, initial-scale=1.0, max-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0 /› - person aashi; 26.06.2014
comment
это тоже не работает, что я изначально использовал, было ‹meta name=viewport content=user-scalable=no, initial-scale=1, max-scale=1, Minimum-scale=1, width=device-width, height=device- height, target-densitydpi=device-dpi/›, и я тестирую это на своем телефоне с Android 4.0 ICS. есть ли что-то связанное с телефоном. - person user3076847; 26.06.2014

arrow_upward
1
arrow_downward

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

person pavja2    schedule 30.06.2014

arrow_upward
0
arrow_downward

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

person sonic    schedule 15.10.2015