Relatado: Unidades de medida com porcentagem do View-port
Existem muitas propriedades CSS ainda não implementada por todos navegadores, principalmente os mobiles.
Alguns pontos a considerar
Não é por que uma propriedade é "lançada" que todos motores de renderização irão conseguir suportá-las. Quando uma nova "funcionalidade" é padronizada pelo W3C (acredito que sejam eles atualmente que definem as propriedades CSS assim como HTML) que todos navegadores modernos irão conseguir suportar de imediato. Existem várias funcionalidades ainda não implementadas e mesmo que implementada elas podem causar BUGS.
Só porque o W3C definiu que uma nova funcionalidade deverá funcionar de uma maneira, não significa que todos navegadores terão na sua estrutura o "mesmo código" que irá executar igualmente o processo. O que eu quero dizer com isto é que muitas propriedades por motor de renderização estão sujeitas a BUGs.
Não é porque foi lançada uma nova propriedade CSS que os navegadores irão suportar na mesma versão que estão, ou seja quando o navegador der suporte será lançado uma nova versão e você terá que fazer o "update".
Assim como os navegadores o WebView
usa um motor web, este motor geralmente é mais difícil de atualizar que um navegador, em muitos casos dependendo da versão da API talvez nem possa usar recursos mais modernos.
Este é o caso das unidades de medidas vh
, vm
, vmin
e vmax
que provavelmente ainda não são suportados completamente.
Nota: Além das unidades de medidas, outras propriedades CSS podem não ser suportadas e por isto podem ocasionar problemas que você desconheça (além dos que você já notou).
- InternetExplorer 9+ á 11 (Suporte parcial)
- Firefox 34+
- Chrome 31+
- Safari 7.1+
- Opera 26+
- iOS Safari* 7.1+
- Opera Mini* 8
- Android Browser* 4.4+
- Chrome for Android 40+
Conforme a lista, o Android só passou a suporta view-port units
na versão 4.4, em outras palavras, acredito que o seu aplicativo (que usa webView) só irá rodar API Level 19 ou superior.
Bugs conhecidos
- Chrome não suporta unidades viewport para largura de
border
, column-gap
, valores de transform
, box-shadow
ou calc()
- Safari e iOS Safari (ambos 6 e 7) não suportam unidades viewport para largura de
border
, colunas gaps, valores de transform
, box-shadow
ou calc()
- iOS 7 Safari define valor de unidade do viewport para 0 se a página tiver deixado a página e retornar após 60 segundos.
- iOS 7 Safari recalcula larguras definidas em
vh
como vw
e alturas definidas com vw
como vh
, quando a orientação muda.
- Internet Explorer 9 em print-mode interpreta
vh
como páginas. 30vh
= 30 paginas
Solução alternativa
Existe um projeto chamado Viewport Units Buggyfill™ que pode ajuda-lo.
Apesar de ser um projeto exclusivo para fixar problemas no Safari para iOS, ele da suporte para o IE9+ e acredito que ajude com o WebKit (no seu caso o WebView) para Android também.
Solução com Jquery
No SOen existe uma resposta com uma solução que utiliza Jquery, exemplo (O processo é manual):
/*
* CSS viewport units with jQuery
* http://www.w3.org/TR/css3-values/#viewport-relative-lengths
*/
;(function( $, window ){
var $win = $(window)
, _css = $.fn.css;
function viewportToPixel( val ) {
var percent = val.match(/[\d.]+/)[0] / 100
, unit = val.match(/[vwh]+/)[0];
return (unit == 'vh' ? $win.height() : $win.width()) * percent +'px';
}
function parseProps( props ) {
var p, prop;
for ( p in props ) {
prop = props[ p ];
if ( /[vwh]$/.test( prop ) ) {
props[ p ] = viewportToPixel( prop );
}
}
return props;
}
$.fn.css = function( props ) {
var self = this
, update = function() {
return _css.call( self, parseProps( $.extend( {}, props ) ) );
};
$win.resize( update ).resize();
return update();
};
}( jQuery, window ));
// Usage:
$('#test').css({
height: '50vh',
width: '50vw',
marginTop: '25vh',
marginLeft: '25vw',
fontSize: '10vw'
});
$(window).resize(function() {
$('#test').css({
height: '50vh',
width: '50vw',
marginTop: '25vh',
marginLeft: '25vw',
fontSize: '10vw'
});
});
#test {
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test">test</div>
vw
evh
não são suportados por todos navegadores e provavelmente o webview (que no caso é o que é usado para criar o aplicativo) não é uma versão mais recente dowebkit
.width:
como%
,px
,pt
,em
são suportados,vm
provavelmente não. Leia a minha resposta, tem uma lista de navegadores suportados. Provavelmente o motor do seu webView é atualizado, mas não a mesma versão da Apple (que está bem mais atualizada) ou do Blink (que também está bem atualizado).