Firebase/AngularJS Bootstrap 应用程序不适应移动屏幕答案

【问题标题】：Firebase/AngularJS Bootstrap App does not adjust to mobile screenFirebase/AngularJS Bootstrap 应用程序不适应移动屏幕
【发布时间】：2018-01-04 19:25:50
【问题描述】：

我是 firebase 和 Angular 的新手。我只是尝试构建一个应用程序，似乎有一些东西不适用于引导网格。当我缩小窗口时，应用程序会调整。但是当我尝试使用控制台和移动尺寸时，该应用程序不会像正常的引导网站那样调整到屏幕尺寸。你可以自己看看：

也许我只是将脚本错误地对齐... 我也尝试从 jquery 切换到 UI Bootstrap，但它也无法正常工作。

    <!DOCTYPE html>
<html ng-app="nipfct">
  <head>
    <meta charset="utf-8">
    <base href="/">


    <title>Nobody is perfect</title>

    <link rel="stylesheet" href="theme/css/bootstrap.css" media="screen" />
    <link rel="stylesheet" href="theme/css/styles.css" type="text/css" media="screen" />

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/4.8.1/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/4.8.1/firebase-auth.js"></script>
    <script defer src="/__/firebase/4.8.1/firebase-database.js"></script>
    <script defer src="/__/firebase/4.8.1/firebase-messaging.js"></script>
    <script defer src="/__/firebase/4.8.1/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
    <!--<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
    <script src="theme/js/ui-bootstrap-tpls-2.5.0.min.js"></script>
    <script src="theme/js/scripts.js"></script>


  </head>
  <body ng-controller="mainController">

Scripts.js

    var nipfctView = angular.module('nipfct', ['ngRoute', 'firebase', 'ui.bootstrap']);


      nipfctView.config(function($routeProvider, $locationProvider) {
        $routeProvider


            $routeProvider
            .when('/', {
                templateUrl : 'pages/login.html',
                controller  : 'mainController'
            })

            .when('/home', {
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            })

            .when('/settings', {
                templateUrl : 'pages/settings.html',
                controller  : 'mainController'
            })

            $locationProvider.html5Mode(true);

    });

    nipfctView.controller('mainController', function($scope) {

    });

【问题讨论】：

标签： javascript angularjs twitter-bootstrap firebase

【解决方案1】：

尝试在您的 head 部分添加此元标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【讨论】：