我正在使用 bootstrap 3 和 angularjs(使用 angular for bootstrap)来运行在 google apps 脚本上的 html5 应用程序。
我原以为 Bootstrap 会默认响应，但令我惊讶的是，一个非常简单的表单在我的移动设备上仍然很小。文本、按钮和输入字段非常小，几乎无法使用。我正在为移动屏幕编写一些 CSS 规则，但我不确定是否应该这样做。也许我做错了什么？
这是表格。为了简单起见，我删除了一些额外的东西，但是 bootstrap 使任何单一形式成为一个大怪物:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
<!-- BOOTSTRAP CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<base target="_top">
<?!= include('css'); ?>
</head>
<body ng-app='Gestor'>
<div class="container-fluid" ng-controller="ExampleController">
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-8 col-lg-4">
<fieldset class="form-group">
<label for="Concepto" class="col-md-4">Concepto:</label>
<div class="col-md-8 text-left"><input type="text" ng-model="data.concepto" class="form-control"></div>
</fieldset>
</div>
<div class="col-md-6 col-lg-4">
<fieldset class="form-group">
<label class="col-md-4" for="pvp" >Precio:</label>
<div class="col-md-8">
<div class="input-group">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('pvp',-5)">-5</a>
<input type="number" ng-model="data.pvp" class="form-control">
<div class="input-group-addon">€</div>
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('pvp',5)">+5</a>
</div>
</div>
<label class="col-md-4 " for="cantidad">Cantidad:</label>
<div class="col-md-8">
<div class="input-group">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('cantidad',-5)">-5</a>
<input type="number" ng-model="data.cantidad" class="form-control">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('cantidad',5)">+5</a>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6 col-lg-4">
<fieldset class="form-group">
<label class="col-md-4" for="Category">Categoría:</label>
<div class="col-md-8">
<select ng-model="data.category" class="form-control form-control-lg" ng-options="option for option in formValues.availableOptions" ></select>
</div>
<label class="col-md-4" for="Fecha">Fecha:</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="data.fecha" is-open="datepicker.opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"> </i></button></span>
</div>
</div>
</fieldset>
</div>
<div class="col-md-12">
<fieldset class="form-group">
<button ng-click="formValues.submitStatus ===0 ? submit() : reset()" class="btn" ng-class="{'btn-primary':(formValues.submitStatus===0),'btn-success':(formValues.submitStatus===1),'btn-danger':(formValues.submitStatus<0)}" type="submit">{{formValues.submitStatus===0 ? 'Register' : 'Reset'}}</button>
</fieldset>
</div>
</div>
</form>
</div>
<!-- MAIN APP CODE -->
<?!= include('app.js'); ?>
</body>
</html>
编辑:
这是一张显示我想要实现的图像。如您所见，input 和 label 元素相当大，但那是因为我制作的自定义 CSS 样式。我希望这在 Bootstrap 上是自动的。如果你看一下底部，你会看到一个非常小的按钮，这就是没有我的自定义样式时整个表单的显示方式。
[.. 删除图片..]
编辑2: 这是添加的另一个屏幕截图。这次是一个更简单的形式，直接取自这里:
http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=vertical-form-layout
如你所见，它看起来很糟糕
编辑 3:
我添加了标签 google apps script，因为这应该是 google apps 脚本如何在 Iframe 上提供网页的问题。我已经更新了@Satej 提供的 plunk 以使其与 angular 一起正常工作，但它完全符合我的预期:
http://plnkr.co/edit/Ze4DEQDxr3Hd8SVtdifZ?p=preview
我已经在我的移动设备上打开了 plunker，它可以完美运行，就您在以下屏幕截图中看到的而言，没有任何问题:
所以问题是，谷歌应用程序在提供 HTML 文件时会执行什么脚本以使其显示得如此之小？
最佳答案
终于找到了解决方案。
问题是视口(viewport)元标记。它被 CAJA 删除，或者任何对 IFRAME 模式应用的清理。
关于这个有一个错误，人们指出了这个确切的问题:
https://code.google.com/p/google-apps-script-issues/issues/detail?id=4659
在同一个线程上，有人链接到一个解决方案:
https://plus.google.com/+MarcoColomboMow/posts/GXgRCh98HTu
最后，只需在提供服务时(在 doGet 函数上)将以下内容添加到 html 模板即可
return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).addMetaTag('viewport', 'width=device-width, initial-scale=1');
关于css - Bootstrap 3 元素在 google-apps-script html 服务的移动设备上仍然很小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35626217/