在手机上查看时，Apps 脚本 Web 应用程序元素太小

Question

在我的手机上，我的选择按钮非常小。我试图让它们加起来占据 100% 的水平空间，这样每一个都会占据 33% 的水平空间。

在我的计算机上，它们占据了 100% 的水平空间，就像我想要的那样。

如何为我的手机修复此问题？

html:

<div data-role="page" id="Gauntlet">
  <div data-role="header">
    <div data-role="navbar">
      <ul>
        <li><a href="#home" class="ui-btn-active ui-state-persist">Home</a></li>
      </ul>
    </div>
  </div>
  <div data-role="main" class="ui-content">
    <div data-role="collapsible-set">
      <div data-role="collapsible" data-collapsed="false" data-mini="true">
        <h3>Gauntlet Traits:</h3>
        <div class="ui-field-contain">
          <fieldset data-role="controlgroup" data-type="horizontal" class="custom-fieldset">
            <select id="myList1" data-mini="true"></select>
            <select id="myList2" data-mini="true"></select>
            <select id="myList3" data-mini="true"></select> 
          </fieldset>
        </div>
        <button type="button" id="submit" data-mini="true">Submit</button> 
      </div>
    </div>
    <div id="table_div"></div>
  </div>
  <div data-role="footer">
    <h2></h2>
  </div>
</div>

CSS：

.custom-fieldset .ui-controlgroup-controls {
    width: 100% !important;
}

.custom-fieldset .ui-controlgroup-controls .ui-select {
    width: 33.33% !important;
}

Answer 1

正如视口元标记文档中所写，

直接包含在 Apps 脚本 HTML 文件中的元标记将被忽略。仅允许使用以下元标记。

因此，添加元标记服务器端：

return HtmlService
        .createHtmlOutputFromFile('index')
        .addMetaTag('viewport', 'width=device-width, initial-scale=1');