2

Tenho um site responsivo, porém preciso que ele seja exibido de forma diferente dentro de um iframe de webapp (sem menu de navegação, sem rodapé, por exemplo). Como faço para carregar um css diferente, ou ocultar elementos, se o conteúdo for carregado dentro do aplicativo/iframe? (lembrando que a versão responsiva no navegador continuará do jeito que está).

Obrigado.

4
  • Está usando algum framework? 13/10/2015 às 13:30
  • 1
    Não entendi muito bem. O seu site já está responsivo para dispositivos mobiles, e você quer que carregue outro css quando for acessado pelos mesmos? Teria como explicar melhor?
    – Randrade
    13/10/2015 às 13:33
  • Exato. Coisas do meu patrão. Ele quer que, mesmo com o site sendo responsivo, seja desenvolvido um aplicativo (que carrega o mesmo site/endereço, porém sem alguns elementos, como o cabeçalho e o rodapé...) - Eu consegui já carregar outro CSS detectando se a página for aberta em um frame, mas não funcionou. Preciso que haja como detectar se o site está sendo acessado pelo navegador ou por um aplicativo. 14/10/2015 às 14:07
  • Só para dar feedback de como resolvi: Media query não funcionaria, pois iria alterar também a visualização fora do aplicativo. O que fiz foi mandar o aplicativo abrir um link diferente, no caso um php que faria a ponte criando uma session, e dentro da página em questão carregar esta session e, carregando 2 estilos diferentes via javascript: 1) se tivesse uma session criada ou 2) sem session criada. 26/10/2015 às 14:52

1 Resposta 1

0

Acredito que o recurso media query possa te ajudar.

O código abaixo informa que os elementos com a classe .only-webapp terão display:none enquanto a largura estiver abaixo de 400px.

@media(max-width: 400px){
    .only-webapp{
        display: none;
    }
}

Código no js Fiddle.

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 .