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

尝试添加view-port meta tag：

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

Answer 2

对自定义字段集类不应用33.33％的宽度

CSS：

.custom-fieldset > select {
    width: 33.33%;
}

Answer 3

按此处所述使用jQuery移动网格：http://demos.jquerymobile.com/1.4.5/grids-buttons/

myname@DESKTOP-0SD47KB MINGW64 ~/Desktop/maevenNetbeans/MyProject(master)
    $ git remote -v
    origin  https://github.com/Myname/MyProject.git (fetch)
    origin  https://github.com/Myname/MyProject.git (push)
    origin2 https://github.com/Myname/MyProject(fetch)
    origin2 https://github.com/Myname/MyProject(push)

const catOne = (2 in response.data && 0 in response.data[2]) ? response.data[2][0]['Count'] : None;

$(document).on("collapsiblecreate", function(e) {
  /* Add a nice smooth animation to the collapsible */
  $(this)
    .on("collapsiblebeforeexpand", function(event) {
      $(this).find(".ui-collapsible-content").each(function() {
        $(this).stop().slideDown("fast");
      });
      return true;
    })
    .on("collapsiblebeforecollapse", function(event) {
      $(this).find(".ui-collapsible-content").each(function() {
        $(this).stop().slideUp("fast");
      });
      return true;
    })
    .find(".ui-collapsible-content").css({
      "display": "block"
    });
});

Answer 4

好吧，这不是对问题的确切答案，但确实可以解决问题……我可以使用导航栏来保存我的选择菜单a la this solution。

手机上的jQuery移动水平选择按钮太小

4 个答案: