0

Estou desenvolvendo uma aplicação mobile em HTML, JavaScript e CSS utilizando o phonegap. Preciso ajustar / adequar o mesmo layout de uma página tanto para modo portrait quanto para modo landscape. Minha dúvida é a seguinte, quando eu identifica a mudança de modo, de landscape para portrait e vice-versa, eu quero carregar um CSS diferente, como faço para carregar um CSS dinamicamente em uma página utilizando jQuery?

1

1 Resposta 1

2

Se em jQuery não for possível, e em JavaScript como faço?

jQuery é um framework javascript. O intuito dele é tornar mais simples o que pode ser feito em javascript. Se é possível em jQuery então é possível em javascript.

como faço para carregar um CSS dinamicamente em uma página utilizando jQuery

Você não precisa necessariamente do jQuery para fazer isso. Vou te mostrar uma forma de fazer utilizando javascript puro, e, caso você tenha interesse, você pode providenciar a migração para o jQuery.

Pro seu algoritmo vamos precisar basicamente de 2 passos:

  1. verificar quando estamos em modo portrait ou landscape
  2. alterar o atributo href de uma tag link para carregar o estilo adequado

Verificando o modo

Você pode verificar o modo atual utilizando o seguinte código:

if (window.matchMedia("(orientation: portrait)").matches) {
    // MODO PORTRAIT
}

if (window.matchMedia("(orientation: landscape)").matches) {
    // MODO LANDSCAPE
}

Você também pode criar uma função que verifica o tamanho da janela, caso queira alterar o estilo de acordo com uma determinada largura. Desse jeito você pode criar um estilo para dispositivos pequenos, médios, grandes, extra grandes. É exatamente isso que o bootstrap faz, no entanto isso é feito através de Media Queries e não javascript.


Alterando o href

Essa parte é relativamente simples, você pode criar uma tag link com um id qualquer e modificar o atributo href de acordo com a condição que quiser. Segue um exemplo:

<link rel="stylesheet" id="dynamic-link">

<script>
var dynamicLink = document.querySelector('#dynamic-link');

if (CONDICAO DO MODO PORTRAIT) {
    dynamicLink.setAttribute('href', 'portrait.css');
} else {
    dynamicLink.setAttribute('href', 'landscape.css');
}
</script>

Media Queries

Ao invés de carregar arquivos dinamicamente, você tem a opção de criar um arquivo CSS único com algumas condições específicas, como declarações que são aplicadas apenas em determinados modos ou resoluções. Segue um exemplo:

@media screen and (orientation:portrait) {  
    // ESTILO PARA MODO PORTRAIT    
}

@media screen and (orientation:landscape) {     
    // ESTILO PARA MODO LANDSCAPE   
}

Segue o link da especificação de Media Queries para maiores informações.

1
  • Muito obrigado @Romulo!
    – Duds
    Commented 2/11/2015 às 16:34

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 .