引导表单文本在 Google Apps Script htmlservice 中的手机上没有响应答案

【问题标题】：Bootstrap form text is not responsive on mobiles in Google Apps Script htmlservice引导表单文本在 Google Apps Script htmlservice 中的手机上没有响应
【发布时间】：2017-10-27 08:32:29
【问题描述】：

我使用 Google Apps Script HTMLService 和 Bootstrap CDN 开发了 webapp。该设计适用于台式机和笔记本电脑。我设计了 3 列形式。

它会自动转换为预期的移动设备中的单列。但是文本和徽标看起来非常小，并且看起来不像引导程序优化。请在笔记本电脑和手机上查看此链接：https://script.google.com/macros/s/AKfycbyVBzSQxrsKXDlAVPdIUHWl1g406ucRfKghfzFY7FVKvL8ji9bS/exec

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Index');
  return template.evaluate()
      .setTitle('Responive Form')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   
   <!-- Optional theme -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
   
   <!-- Latest compiled and minified JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 </head>
 <body>   

<div class="container">
            <div class="row">
                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <label id="labels" class="control-label">First Name</label>
                          <input class="form-control" type="text"id="firstName" >
				</div>
                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <label id="labels" class="control-label">Last Name</label>
                          <input class="form-control" type="text" id='lastName'>
                 </div>
                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <label id="labels" class="control-label">Email</label>
                          <input class="form-control" type="text">
                 </div>                   
            </div>

</div>
  </body>
</html>

【问题讨论】：

请分享您的代码。
如果没有一些代码，这几乎是不可能的。检查您是否声明了正确的 col 宽度。您应该使用 col-xs-12 使表单与屏幕一样宽，即使在最小的设备上也是如此。
我已经添加了我的代码...你能检查一下吗？我尝试了几乎所有不同的课程，但手机中的文字仍然很小。
我已经添加了我的代码...你能检查一下吗？我尝试了几乎所有不同的课程，但手机中的文字仍然很小。
我认为您的示例没有表现出您在使用您的应用时遇到的行为。此外，js链接不起作用。我必须用 maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > 替换它才能使其工作。抱歉，我无法重现该问题。

标签： css twitter-bootstrap google-apps-script

【解决方案1】：

我必须在 doGet 中添加 .addMetaTag('viewport', 'width=device-width, initial-scale=1') 到 evaluate()：

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Index');
  return template.evaluate()
      .setTitle('Responive Form')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

【讨论】：

也救了我的命！非常感谢！

【解决方案2】：

你能运行它并检查你是否看到同样的问题吗？

使用 F12 工具检查元素显示 html 具有 font-size:10px。它是从引导程序继承的。看看这是否会覆盖您的字体大小。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   
   <!-- Optional theme -->
   <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">-->
   
   <!-- Latest compiled and minified JavaScript -->
   <link src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></link>
 </head>
 <body>   

<div class="container">
            <div class="row">
                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <label id="labels" class="control-label">First Name</label>
                          <input class="form-control" type="text"id="firstName" >
				</div>
                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <label id="labels" class="control-label">Last Name</label>
                          <input class="form-control" type="text" id='lastName'>
                 </div>
                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <label id="labels" class="control-label">Email</label>
                          <input class="form-control" type="text">
                 </div>                   
            </div>

</div>
  </body>
</html>

【讨论】：