1

Estou usando bootstrap-materialem um sistema, caso eu use o navegador não maximizado a responsividade funciona. Porém em dispositivos móveis não. Alguém sabe o que pode ser?

Aqui com o navegador em modo janela

Aqui em dispositivo móvel


Estilos

<link href="{{ elixir('css/all.css') }}" rel="stylesheet"/>
<link href="/resources/bootstrap-material-design/dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="/resources/bootstrap-material-design/dist/css/ripples.min.css" rel="stylesheet">
<link href="/resources/bootstrap-material-design/dist/sassc/ripples.css" rel="stylesheet">
<link href="/resources/bootstrap-material-design/dist/sassc/bootstrap-material-design.css" rel="stylesheet">

Scripts

<script src="/resources/js/jquery.js"></script>
<script src="/resources/js/bootstrap.js"></script>
<script src="{{ elixir('js/all.js') }}"></script>
<script src="/resources/bootstrap-material-design/dist/js/material.js" type="text/javascript"></script>
<script src="/resources/bootstrap-material-design/dist/js/ripples.js" type="text/javascript"></script>

Existe algum outro css que preciso importar?

1 Resposta 1

3

Esse problema é resolvido utilizando a META TAG viewport.

Descrição básica: O viewport é a área onde seu website aparece

Adicione essa tag no head:

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
  • A propriedade width controla o tamanho da viewport;
  • A propriedade initial-scale controla o nível de amplificação;
  • As propriedades maximum-scale, minimum-scale, e user-scalable controlam a permissão para o usuário efetuar aumento ou diminuição da página;

Não esqueça de atualizar a página antes de testar.
Espero ter ajudado.

Fontes:
https://developer.mozilla.org/pt-BR/docs/Mozilla/Mobile/Viewport_meta_tag http://www.w3schools.com/css/css_rwd_viewport.asp

2
  • Não só ajudou como resolveu o problema, muito obrigado. Aceitarei a resposta assim que o stack permitir Commented 9/08/2016 às 17:49
  • Já passei pelo mesmo problema. ; ) Commented 9/08/2016 às 17:50

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 .