0

Estou tendo o seguinte problema:

Tenho uma página que tem vários slides em HTML mesmo. Todos esses slides tem seu tamanho definido por vh ao invés de pixel.

O problema é que quando vou acessar com mobile, o celular ficando na horizontal tudo bem, mas quando coloco na vertical ele não exibe o slide que eu estava, ele faz o recalculo do vh, devido a mudança de orientação do celular, e passa para o slide seguinte.

Primeiramente eu pensei em desabilitar a transição de tela do celular via javascript, mas parece ser gambi.

Tem como eu ver se o site esta sendo acessado por mobile e executar uma função em javascript para que ele substitua tudo que tiver vh para pixel?

Não sei se essa é a melhor opção, se alguém tiver uma sugestão fico muito grato.

1 Resposta 1

2

Trocar VH por Pixels tem sim, por Media Queries. Seria uma forma de aplicar estilos quando o usuário acessar o conteúdo de um aparelho diferente. Este é um exemplo básico que você deve procurar saber mais a fundo.

@media only screen and (max-width: 480px) {
    body {
        width: 100px;
    }
}

Esse CSS diz que quando o usuário acessar o seu site à partir de um navegador que tenha tela menor do que 480px, o body terá 100px de largura. Com um pouco de pesquisa e trabalho você pode adaptar isso à sua necessidade.

A grande questão é se tem uma outra forma preferível de resolver a sua situação.

2
  • Você mencionou sobre ter "100px", mas no exemplo o width do body passou a ter 500px (e ultrapassando o limite da media querie, que no caso seria 480px). Dê uma corrigida!
    – Cobra
    Commented 27/04/2017 às 15:27
  • @ThiagoBarros Valeu o toque. Corrigido. Commented 27/04/2017 às 16:11

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 .