Phonegapp CSS问题

Question

我的Phonegap应用有关UI的问题。当我在桌面浏览器中查看它时，它看起来像这样（它的方式）：

但是当我在Phonegap（在iOS上）实现它时，它看起来像这样：

这是我的HTML：

<div id="page1">
            <div id="formScales">
                <div class="formContent" id="noise">
                    <p>Noise</p>
                    <input type="button" id="nbtn1" value="Noisy" />
                    <input type="button" id="nbtn2" value="Medium noisy" />
                    <input class="active" type="button" id="nbtn3" value="Neutral" />
                </div>
      [...]
</div>

CSS：

[...]
#formScales {
    position: relative;
    /* otherwise the float of the child gets it out
         of the document flow */
    overflow:auto;
}

input {
    color: #3B444B;
    width: 100%;
    text-decoration: none;
    text-align: center;
    padding: 8px 12px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 700;
    font-family: helvetica, arial, sans-serif;
    border-radius: 2px;
    border: 1px solid #606060;
    background-color: rgba(255,255,255, 0.8);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.active {
    background-color: #99CCFF !important;
    border: 1px solid #606060;
}

#noise {
    float: left;
    width: 31vw;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 7px;
    background-color: rgba(255, 204, 204, 0.3);
}

我的猜测是它与iOS使用的Objective-C UIWebView类有关...我会很高兴有关如何解决这个问题的任何建议 - 也是最好的测试用户界面而不总是重建PG应用程序！

提前致谢！

Answer 1

将“webkit-appearance：none”添加到输入中就行了！

input {
    /* webkit-appearance:none to override standard button design! */
    -webkit-appearance: none;
    [...]
}

Answer 2

您的网页内容是否与i-phone的状态栏重叠？实际上我无法在屏幕截图中看到它。如果是，则可以在config.xml中执行此操作。我遇到了同样的问题，我通过将这些行添加到config.xml来解决它。

<preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
    <preference name="StatusBarStyle" value="lightcontent" />
<preference name="ios-statusbarstyle" value="black-opaque" />

您可以在Android模拟器上测试UI，而无需在PG-build上构建应用程序，但这不能确保您也能获得iOS的正确结果，我的意思是如果您在Android模拟器上测试了UI，那么它就不是＆＃39 ;保证它在i-phone上运行良好。所以我建议你使用PG-build