Question

我正在创建一个带有ionic框架的应用程序并将其包装到android应用程序（webview）中，一切似乎都工作正常，但是当我把它放在我的设备上时，渲染就会被破坏。

Example

来源：

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/jquery.js"></script>

<ion-pane>
    <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>



    </ion-header-bar>
    <ion-content>
        <tour-form>
            <form id="submit">
                <div class="list">
                    <label class="item item-input">
                        <input type="text" placeholder="TID" name="tc">
                    </label>
                    <label class="item item-input">
                        <input type="text" placeholder="Code" name="code">
                    </label>
                    <button class="button button-light">
                        Submit
                    </button>
                </div>
            </form>
        </tour-form>
        <content id="content"></content>
    </ion-content>
</ion-pane>

有人知道这个问题的解决方案吗？

Answer 1

请关注此问题：https://github.com/driftyco/ionic/issues/1880

它与.scroll-content的解释有关：margin-top：-1px;在某些设备上，它是ionic.css文件的一部分。

尝试在style.css中设置： .scroll-content {padding-top:1px;}

此解决方案适用于我的设备（Samsung Galaxy S2，Android 4.2.2）

Android webview糟糕的渲染

1 个答案: