Mobile responsiveness with bootstrap-material?

Question

I’m using bootstrap-materialon a system, if I use the browser not maximized responsiveness works. But on mobile devices not. Someone knows what might be?

---

Styles

<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>

---

Is there any other css I need to import?

Answer 1

This problem is solved using the META TAG viewport.

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

Add that tag in the head:

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">

• The estate width controls the size of the viewport;
• The estate initial-scale controls the level of amplification;
• The properties maximum-scale, minimum-scale, and user-scalable control the permission for the user to increase or decrease the page;

Don’t forget to refresh the page before testing.
I hope I’ve helped.

Sources:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag http://www.w3schools.com/css/css_rwd_viewport.asp