Phonegapp CSS问题答案

【问题标题】：Phonegapp CSS issuePhonegapp CSS问题
【发布时间】：2015-09-07 08:56:18
【问题描述】：

我的 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 类有关...我会很高兴关于如何解决这个问题的任何建议 - 还有什么最好在不总是测试 UI 的情况下重建 PG 应用程序！

提前致谢！

【问题讨论】：

标签： ios css cordova uiwebview phonegap-build

【解决方案1】：

在输入中添加“webkit-appearance:none”就可以了！

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

【讨论】：

【解决方案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，那么它不是保证它可以在 i-phone 上正常工作。所以我会推荐你使用 PG-build

【讨论】：