Diferenciando dispositivos no template
Na plataforma é possível definir diferentes seções de conteúdo, para diferentes dispositivos e telas, se necessário. Podemos construir blocos de código específicos para mobile, tablets, desktops ou combinação deles, sendo: não-mobiles (tablets e desktops), não-desktops (tables e mobile) e etc.
As diretivas necessárias para fazer essas definições são:
@desktop, @else, @enddesktop
Estrutura condicional que detecta se o dispositivo usado pelo usuário é um desktop. O bloco deverá terminar obrigatoriamente com um @enddesktop
. Exemplo:
@desktop
<ul class="menu-desktop"><li>Categoria</li></ul>
@else
<ul class="menu-mobile"><li>Categoria</li></ul>
@enddesktop
@handheld, @else, @endhandheld
Utilizado para definir trechos de código em dispositivos não-desktop (mobile e tablet).
@tablet, @else, @endtablet
Utilizado para definir trechos de código em tablets.
@tablet
<img src="/path/to/tablet-optimized/image"/>
@else
<img src="/path/to/another/image"/>
@endtablet
@nottablet, @else, @endnottablet
Utilizado para definir trechos de código em dispositivos não-tablets (desktop ou mobile).
@mobile, @else, @endmobile
Utilizado para definir trechos de código em mobiles.
@mobile
<img src="/path/to/handheld-optimized/image"/>
@else
<img src="/path/to/high-definition/image"/>
@endmobile
@notmobile, @else, @endnotmobile
Utilizado para definir trechos de código em dispositivos não-mobile (desktop ou tablet).
@ios, @else, @endios
Utilizado para definir trechos de código em dispositivos da plataforma iOS.
@android, @else, @endandroid
Utilizado para definir trechos de código em dispositivos da plataforma Android.
Todas as diretivas acima funcionam como um @if e a utilização delas como @else é opcional, porém também possível.
Comentários
0 comentário
Por favor, entre para comentar.