【问题标题】:<script> tags working on Desktop browser but not on Mobile (MEAN app)<script> 标签在桌面浏览器上工作,但在移动设备上不工作(MEAN 应用程序)
【发布时间】:2016-07-09 00:40:54
【问题描述】:

我的应用在桌面浏览器上运行正常,但是,当我在移动浏览器(Chrome/Safari/Firefox)中打开它时,我的 Angular 应用的标签不会被读取。例如,当我的角度在页面中显示为 {{user.first}} 时,就会出现这种情况,并且根本没有加载角度部分。我希望看到部分内容。这是我的应用程序的头部:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<!-- angular components -->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-cookies.js"></script>
<link href='https://fonts.googleapis.com/css?family=Varela|Oswald:700|Neuton:700|Amatic+SC:700' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='/scripts/config.js'></script>

<!-- date time picker -->
<link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">

<script src="/bower_components/ng-file-upload/ng-file-upload.min.js"></script>

    <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="/bower_components/moment/locale/pt.js"></script>
    <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
    <!-- controllers -->
    <script type='text/javascript' src='/controllers/reservation_controller.js'></script>
    <script type='text/javascript' src='/controllers/api_controller.js'></script>
    <script type='text/javascript' src='/controllers/user_controller.js'></script>
    <!-- factories -->
    <script type='text/javascript' src='/factories/reservation_factory.js'></script>
    <script type='text/javascript' src='/factories/venue_factory.js'></script>
    <script type='text/javascript' src='/factories/user_factory.js'></script>


    <script type="text/javascript" src="/assets/js/angular-bootstrap-datetimepicker-directive.js"></script>
    <link href="/assets/css/main.css" type="text/css" rel="stylesheet" media="screen,projection"/>

【问题讨论】:

  • 错误日志说明了什么?
  • 寻求调试帮助的问题(“为什么这段代码不起作用?”)必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码.没有明确问题陈述的问题对其他读者没有用处。请参阅:如何创建minimal reproducible example 如果错误是当我的角度显示为 {{user.first}} 时会看到此错误,则提供的代码必须重现该错误。跨度>
  • @JohannesReuter 我的错误日志没有表明后端有任何异常。不过,我仍在试图弄清楚如何查看移动浏览器的控制台以检查任何前端错误,所以我在黑暗中摸索。
  • @BSMP 抱歉,这是我第一次在这里发布问题,但感谢您的提示!期望的行为是让我的角度部分在页面上显示移动浏览器的页面,就像它们目前在桌面浏览器上一样。它们根本没有显示。

标签: javascript angularjs node.js mobile


【解决方案1】:

没有什么明显不合适的地方,但是您的移动浏览器控制台可能比我能告诉您更多关于您的问题的信息。

我强烈推荐Chrome's remote debugging tool

【讨论】:

    【解决方案2】:

    感谢@NicholasAnderson 的建议,我能够打开一个控制台来检查问题。奇怪的是,角度控制器中的一个错误阻止了所有 javascript 在移动浏览器上的加载,但桌面浏览器显然更宽松,尽管出现了错误,但仍加载了所有 javascript。因此,它对前者不起作用,但对后者起作用。感谢您的建议!如果有人感兴趣,另一个在移动浏览器上调试的有用链接是:https://blog.idrsolutions.com/2015/02/remote-debugging-ios-safari-on-os-x-windows-and-linux/

    【讨论】:

      猜你喜欢
      • 2014-01-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-12-18
      • 1970-01-01
      • 1970-01-01
      • 2014-06-08
      相关资源
      最近更新 更多