Question

我已经使用XDK创建了一个演示应用。我正在使用网格来控制页面上的控件。当我在XDK模拟器中运行时，控件看起来很好，对于运行机器人的GenyMotion VM也是如此。

但是当我在真正的Android手机上安装应用程序时，对齐完全被破坏了。

我很难弄清楚出了什么问题!!

我附上截图来描绘场景：

1）关于设计师： The Designer

2）在XDK模拟器上： The app on XDK Emulator

3）在Micromax CanvasHD上： The same app on CasvasHD

代码：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <script src="intelxdk.js"></script>
    <script src="cordova.js"></script>
    <script src="xhr.js"></script>
    <script src="xdk/init-dev.js"></script>
    <script type="application/javascript" src="js/app.js"></script>
    <script type="application/javascript" src="js/init-app.js"></script>
    <script type="application/javascript" src="lib/jquery.min.js"></script>
    <script type="application/javascript" src="js/index_user_scripts.js"></script>
    <script type="application/javascript" src="marginal/marginal-position.min.js"></script>
    <script type="application/javascript" src="xdk/appdesigner/js/rest-of-space.js"></script>
  </head>

  <body class="row-alignment-1">

    <div class="upage" id="mainpage" data-role="page">

      <div class="upage-outer">
        <div class="uib-header header-bg container-group inner-element uib_w_1" data-uib="layout/header" data-ver="0">
          <h2></h2>
          <div class="widget-container wrapping-col single-centered"></div>
          <div class="widget-container content-area horiz-area wrapping-col left"></div>
          <div class="widget-container content-area horiz-area wrapping-col right"></div>
        </div>
        <div class="upage-content ac0 content-area vertical-col" id="page_22_9">

          <div class="uib-grid widget uib_w_3 grid-text grid-height d-margins" data-uib="layout/grid" data-ver="0">
            <div class="uib-grid-row">
              <div class="uib-grid-cell widget-container"></div>
              <div class="uib-grid-cell widget-container"></div>
              <div class="uib-grid-cell widget-container"></div>
            </div>
            <div class="uib-grid-row">
              <div class="uib-grid-cell widget-container"></div>
              <div class="uib-grid-cell widget-container">
                <button class="btn widget uib_w_4 d-margins btn-default" data-uib="twitter%20bootstrap/button" data-ver="1" id="btnVerify">Check</button>
              </div>
              <div class="uib-grid-cell widget-container"></div>
            </div>
            <div class="uib-grid-row">
              <div class="uib-grid-cell widget-container"></div>
              <div class="uib-grid-cell widget-container"></div>
              <div class="uib-grid-cell widget-container"></div>
            </div>
          </div>
        </div>
        <div class="uib-footer uib-footer-fixed footer-bg container-group inner-element uib_w_2" data-uib="layout/footer" data-ver="0">
          <h2></h2>
          <div class="widget-container wrapping-col single-centered"></div>
          <div class="widget-container content-area horiz-area wrapping-col left"></div>
          <div class="widget-container content-area horiz-area wrapping-col right"></div>
        </div>
      </div>
    </div>
  </body>

</html>

我不确定这个问题的原因是什么。

期待就此事提供一些帮助。

Answer 1

你有哪个版本的Android设备？

网格使用flex-box，在较旧的Android网页上可能不支持，尝试在英特尔XDK中构建Crosswalk for Android版本。

Crosswalk for Android使用较新的基于Chromium的Web运行时打包应用程序，该运行时具有比Android设备上默认Web视图中更多的html5功能。以下是有关Crosswalk构建与常规Android构建的更多详细信息：https://software.intel.com/en-us/xdk/docs/why-use-crosswalk-for-android-builds

网格无法在Intel XDK中运行

1 个答案: