1

Tenho um site, e estou trabalhando a responsividade nele. Tenho uma versão mobile, parecido com uma Web app, em um diretório especifico dentro do projeto. Atualmente quando a resolução da tela é menor que 768px, ele automaticamente redireciona para o site mobile. Até ai perfeito, más, quando reduzo a janela do browser ele não redireciona, a menos que eu atualize a pagina, pois o que redireciona é um script JQuery que verifica quando a pagina é carregada qual é a resolução.

O problema é que preciso verificar o tempo todo para que possa redirecionar quando a tela estiver menor e já renderizada. Pensei em colocar um media query para resoluções de no minimo 768 de largura, mas não encontrei como redirecionar a partir do proprio css, ou chamar algum script quanto essa query for ativada.

Também aceito como solução algum evento JQuery disparado quando a largura for

2
  • Pq não faz a verificação com o evento resize do jquery? Coloca a função dentro dele e sempre que houver uma mudança no tamanho da janela o evento será chamado. Commented 19/04/2018 às 12:02
  • Pode me fazer um exemplo desse evento? Commented 20/04/2018 às 13:06

2 Respostas 2

1

O correto é você tratar as resoluções com CSS e não Jquery ou JS, usando Design responsivo, As media queries são muito usadas para resolver esse tipo de situação, inclusive não precisa ter 2 pasta uma desktop outra mobile é só controlar as resoluções da tela, segue exemplo:

h1 {
  font-size: 3.0rem;
  color: red;
}

@media screen and (max-width: 990px) {
  h1 {
    font-size: 1.0rem;
    color: blue;
  }
}
<h1>Título</h1>

2
  • Samuel acho que vc não entendeu a pergunta. Ele quer que quando a tela for menor que 768px o usuário seja direcionado para outra página e não mudar o CSS da página que ele já está.
    – hugocsl
    Commented 18/04/2018 às 18:53
  • Eu uso media queries para diversas coisas do meu site, mas a versão mobile é diferente a estrutura, por isso tenho outro diretorio, organizei diferente na versão mobile. Commented 19/04/2018 às 1:41
1

CSS não tem a capacidade de redirecionar pra outra página, porém você consegue usar media queries no JavaScript com o matchMedia.

const handler = ({ matches }) => {
  if (matches)
    window.location = 'URL do seu site mobile'
}

const media = window.matchMedia('(max-width: 767px)')
media.addListener(handler)
handler(media)

Referências:

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 .