4

Tô fazendo um app com Cordova + Sammy.js e CSS3 puro. Consigo deixar o app perfeitamente responsivo e com todos os estilos funcionando no Chrome e FireFox.

Acontece que quando eu dou "build" no cordova e abro a APK no Genymotion (rodando Android 4.4 +) 50% dos estilos se quebram....

Não são renderizadas coisas como tamanho de fonte de container em vw, alguns containers simplesmente tem suas larguras ignoradas e seguem a largura default (100% do pai).

Quero saber se existe alguma forma(framework, library, engine ou preprocessor) que dê para fixar os estilos do APP mas que permita a mesma flexibilidade de estilização do HTML5 puro.

5
  • 1
    vw e vh 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 do webkit.
    – Syzoth
    Commented 15/02/2015 às 2:42
  • 1
    "webview (que no caso é o que é usado para criar o aplicativo) não é uma versão mais recente do webkit". Você quer dizer que o webkit do navegador que estou rodando o app está desatualizado?
    – ropbla9
    Commented 15/02/2015 às 2:55
  • 1
    Não, quero dizer que propriedades CSS costumam não ser totalmente implementadas assim que são lançadas, mesmo os navegadores mais modernos não suportam tudo.
    – Syzoth
    Commented 15/02/2015 às 3:01
  • 1
    @GuilhermeNascimento, até width?!
    – ropbla9
    Commented 15/02/2015 às 3:04
  • 1
    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).
    – Syzoth
    Commented 15/02/2015 às 3:16

2 Respostas 2

2

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).

Suporte das unidades de medida Viewport: vw, vh, vmin, vmax

  • 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>

7
  • 1
    Existe algum preprocessador que faça uma padronização? Como frameworks como o Topcoat, IONIC funcionam?
    – ropbla9
    Commented 15/02/2015 às 3:23
  • 1
    @ropbla9 Fora o "Viewport Units Buggyfill™" eu achei um código jquery (citado na resposta). Teste ambos (um de cada vez). Outra coisa: seu aplicativo tem quer ser compilado para Androids mais antigos que o 4.4? Se não tente compilar no API Level 19 (ou superior) como eu mencionei na resposta. Por favor veja que editei a resposta, por favor leia novamente obrigado.
    – Syzoth
    Commented 15/02/2015 às 3:40
  • 1
    achei algo perfeito para o que eu quero > crosswalk-project.org.
    – ropbla9
    Commented 15/02/2015 às 4:44
  • 1
    @ropbla9 Bom achado, mas note que só funciona "Android 4.0+".
    – Syzoth
    Commented 15/02/2015 às 4:56
  • 2
    @ropbla9 Fico agradecido, mas acho que não precisava necessariamente marcar a minha como correta, apenas um up-vote já estaria bom. Se a sua própria resposta é a mais correta para o seu problema, acredito que seria bom marcar ela. Poderia adicionar um código de exemplo de como usar o webView do cross-wakl a sua resposta também. Obrigado.
    – Syzoth
    Commented 15/02/2015 às 15:52
1

Esse projeto provê uma WebView à parte para o Android que contém as features mais atualizadas do Chrome. Nela é possível rodar features recentes do Chrome para qualquer versão do Android acima de 4.0.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .