Material: My material design is not responsive on mobile?

Created on 8 Mar 2015 · 5Comments · Source: angular/material

<!--index.html-->
<html lang="en" ng-app="StarterApp">

    <head>
        <link rel="stylesheet" href="js/bower_components/angular-material/angular-material.css">
        <link rel="stylesheet" type="text/css" href="css/app.css">
    </head>

    <body layout="column">
        <ui-view></ui-view>
        <!-- Angular Material Dependencies -->
        <script src="js/bower_components/angular/angular.js"></script>
        <script src="js/bower_components/angular-animate/angular-animate.js"></script>
        <script src="js/bower_components/angular-aria/angular-aria.min.js"></script>
        <script src="js/bower_components/angular-material/angular-material.js"></script>
        <script src="js/libs/angular-ui-router.min.js"></script>
        <script src="js/libs/angular-sanitize.js"></script>

        <script src="js/app.js"></script>
        <script src="js/factory.js"></script>
        <script src="js/controller.js"></script>
        <script src="js/routes.js"></script>
    </body>

</html>

<!--home.html-->
<div layout="row">
    <md-toolbar>
        <h1>App Header</h1>
    </md-toolbar>
</div>

<div layout="row" flex>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
        <md-list>
            <md-item>
                <md-button>
                    All
                </md-button>
            </md-item>
            <md-item ng-repeat="term in terms">
                <md-button ng-show="term.count">
                    <span ng-bind-html="term.name"></span>
                </md-button>
            </md-item>
        </md-list>
    </md-sidenav>
    <md-content layout="column" class="md-padding" flex>
        <md-grid-list md-cols="3" md-cols-sm="1" md-cols-md="2" md-gutter="1em" md-row-height="1:1">
            <md-grid-tile ng-repeat="post in posts" md-rowspan="2" md-colspan="1">
                <md-card>
                    <!--<a href="#" title="{{post.title}}" ng-click="toggleRight(post)">-->
                    <!--<img src="{{post.featured_image.attachment_meta.sizes.medium.url}}">-->
                    <!--</a>-->
                    <md-card-content>
                        <h3 class="mb-post-title" ng-bind-html="post.title"></h3>
                        <div class="mb-post-excerpt" ng-bind-html="post.excerpt"></div>
                    </md-card-content>
                </md-card>
            </md-grid-tile>
        </md-grid-list>
    </md-content>
    </md-content>
    <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right" md-is-open="false">
        <md-card>
            <img src="{{post.featured_image.attachment_meta.sizes.medium.url}}">
            <md-card-content>
                <h3 ng-bind-html="post.title"></h3>
                <div ng-bind-html="post.content"></div>
            </md-card-content>
        </md-card>
    </md-sidenav>
</div>

screenshot_2015-03-08-14-47-16 1

Source

ravinderk

Most helpful comment

To ensure that user can't zoom use
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
As a complete reference for mobile

gp187 on 22 Oct 2015

👍19 ❤6

All 5 comments

Include a viewport-meta-tag like <meta name="viewport" content="width=device-width"> to tell the brower that your site is responsive and should be rendered using correct CSS pixel scaling.

Pajn on 8 Mar 2015

👍21 😄3

@Pajn thanks,
problem fixed now.

ravinderk on 9 Mar 2015

banghk71 on 23 Jul 2015

To ensure that user can't zoom use
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
As a complete reference for mobile

gp187 on 22 Oct 2015

👍19 ❤6

@Pajn I have the same problem, I did add the viewport but still the app looks really small, I'm running this inside and Iframe can be that the problem?
small-angular