Question

我正在使用Polymer构建移动应用程序。但是，似乎即使是垫片也没有为旧版本的WebKit引擎切割它（我已经包含了platform.js文件）。然而，它在4.4.2上运行良好。在这里，您可以看到差异：https://cloud.githubusercontent.com/assets/2229435/3941834/d74f77b2-2544-11e4-9fde-48dc3dcf5502.png

我在旧版本上调试了应用程序，这是我对核心工具栏和纸张标签的html：

<core-toolbar class="medium-short">
    <div id="bottomBar" class="toolbar-tools" center="" horizontal="" layout="">
    </div>
    <div id="middleBar" class="toolbar-tools" center="" horizontal="" layout="">
    </div>
    <div id="topBar" class="toolbar-tools" center="" horizontal="" layout="">
        <span>
                <paper-icon-button icon="menu" role="button" aria-label="menu" tabindex="0">
    <template if="{{raisedButton}}"></template>
    <div id="clip">
      <!-- <div id="focusBg"></div> -->
      <paper-ripple id="ripple" class="recenteringTouch circle">
<canvas id="canvas"></canvas></paper-ripple>
      <div id="content">
        <template if="{{iconSrc || icon}}"></template>
          <core-icon id="icon" src="{{iconSrc}}" icon="{{icon}}" aria-label="menu" role="img"><svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit="" style="pointer-events: none; display: block;"><g><path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path></g></svg></core-icon>

        <template if="{{label}}"></template>
      </div>
    </div>
  </paper-icon-button>
                <div>Title</div>
            </span>
        <paper-tabs flex="" role="tablist">
            <div id="tabsContainer" horizontal="" layout="">
                <core-selection id="selection" multi="{{multi}}" on-core-select="{{ selectionSelect }}" hidden=""></core-selection>
                <paper-tab class="pink" role="tab">
                    <div id="tabContainer" center-justified="" center="" horizontal="" layout="">
                        <div class="tab-content">Tab 1</div>
                        <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98">
                            <canvas id="canvas"></canvas>
                        </paper-ripple>
                    </div>
                </paper-tab>
                <paper-tab class="pink" role="tab">
                    <div id="tabContainer" center-justified="" center="" horizontal="" layout="">
                        <div class="tab-content">Tab 2</div>
                        <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98">
                            <canvas id="canvas"></canvas>
                        </paper-ripple>
                    </div>
                </paper-tab>
                <paper-tab class="pink" role="tab">
                    <div id="tabContainer" center-justified="" center="" horizontal="" layout="">
                        <div class="tab-content">Tab 3</div>
                        <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98">
                            <canvas id="canvas"></canvas>
                        </paper-ripple>
                    </div>
                </paper-tab>
                <paper-tab class="pink" role="tab">
                    <div id="tabContainer" center-justified="" center="" horizontal="" layout="">
                        <div class="tab-content">Tab 4</div>
                        <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98">
                            <canvas id="canvas"></canvas>
                        </paper-ripple>
                    </div>
                </paper-tab>
                <paper-tab class="pink" role="tab">
                    <div id="tabContainer" center-justified="" center="" horizontal="" layout="">
                        <div class="tab-content">Tab 5</div>
                        <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98">
                            <canvas id="canvas"></canvas>
                        </paper-ripple>
                    </div>
                </paper-tab>
                <div id="selectionBar" on-transitionend="{{ barTransitionEnd }}"></div>
            </div>
        </paper-tabs>
    </div>
</core-toolbar>

与桌面Chrome中的html相对应：

<core-toolbar class="medium-short">
    <span>
        <paper-icon-button icon="menu" role="button" aria-label="menu" tabindex="0"></paper-icon-button>
        <div>Title</div>
    </span>
    <paper-tabs flex="" role="tablist">
        <paper-tab class="pink" role="tab">Tab 1</paper-tab>
        <paper-tab class="pink" role="tab">Tab 2</paper-tab>
        <paper-tab class="pink" role="tab">Tab 3</paper-tab>
        <paper-tab class="pink" role="tab">Tab 4</paper-tab>
        <paper-tab class="pink" role="tab">Tab 5</paper-tab>
    </paper-tabs>
</core-toolbar>

我可以看到垫片通过创建所有这些元素来启动一些东西，但我认为ShadowDOM不能很好地工作，因为它们看起来没有样式。

感谢您的帮助

编辑：找到下面的答案

Answer 1

以防万一有人正在对这样的问题猛烈抨击：我们计划不支持Polymer的移动浏览器，但是现在他们不支持它。在4.4他们切换到Chrome浏览器的WebView，这就是它工作的原因。有一个名为Crosswalk的项目：https://crosswalk-project.org/#documentation/cordova用Chrome取代了WebView，因此可以支持4.x版本的android。

Polymer JS无法在android 4.2.1和4.1.2上运行

1 个答案: