Responsiveness on mobile devices with bootstrap-material?

Navigation
1

I'm using bootstrap-material on a system, if I use the non-maximized browser the responsiveness works. But not on mobile devices. Does anyone know what it can be?

  

Styles

<linkhref="{{ 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>

Is there any other css that I need to import?

    
asked by anonymous 09.08.2016 / 19:45

1 answer

3

This problem is resolved using the META TAG viewport .

Basic description: The viewport is the area where your website appears

Add this tag to head : 

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
  • The width quer property controls the size of the viewport;
  • The initial-scale property controls the amplification level;
  • The properties maximum-scale , minimum-scale , and user-scalable control the permission for the user to increase or decrease the page;

Do not forget to refresh the page before testing. I hope I have helped.

Sources:
link link

    
09.08.2016 / 19:46
JavaScript Error Event definition How to declare functions in an array declared in the block of a class?