在手机上查看时，Apps Script Web App 元素太小 [英] Apps Script Web App elements are too small when viewed on a phone

查看：20
本文介绍了在手机上查看时，Apps Script Web App 元素太小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

在我的电脑上，它们占据了 100% 的水平空间，就像我想要的.

如何为我的手机解决这个问题?

html:

<div data-role="header"><div data-role="navbar"><ul><li><a href="#home" class="ui-btn-active ui-state-persist">首页</a></li>

<div data-role="main" class="ui-content"><div data-role="collapsible-set"><div data-role="collapsible" data-collapsed="false" data-mini="true"><h3>护手特性:</h3><div class="ui-field-contain"><fieldset data-role="controlgroup" data-type="horizo​​ntal" 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>

<button type="button" id="submit" data-mini="true">提交</button>

<div id="table_div"></div>

<div data-role="footer"><h2></h2>

CSS:

.custom-fieldset .ui-controlgroup-controls {宽度:100%！重要；}.custom-fieldset .ui-controlgroup-controls .ui-select {宽度:33.33%！重要；}

解决方案

如 视图端口元标记文档,

<块引用>

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

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

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

On my phone, my select buttons end up being very small. I'm trying to get them to take up, combined, 100% of the horizontal space, so that each one will take up 33% of the horizontal space.

On my computer, they take up 100% of horizontal space, like I want.

How do I fix this for my mobile?

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;
}

解决方案

As written in view-port meta tag documentation,

Meta tags included directly in an Apps Script HTML file are ignored. Only the following meta tags are allowed.

So, add the meta tag server side:

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

这篇关于在手机上查看时，Apps Script Web App 元素太小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆