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
?
-
1Não precisa JQuery.– Renan GomesCommented 2/11/2015 às 16:22
1 Resposta
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:
- verificar quando estamos em modo portrait ou landscape
- alterar o atributo
href
de uma taglink
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.