Phonegapp CSS问题

Question

我的Phonegap应用程序有关于用户界面的一些问题。当我在我的桌面浏览器中查看它，它看起来像这样（的方式，建议立即进行删除是）：

但是，当我在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应用程序！

在此先感谢！

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模拟器测试用户界面，而无需对PG-建造建筑物的应用程序，但是这并不能保证你，你会得到iOS的正确结果也是，我的意思是如果你在android模拟器上测试了UI，那么它不能保证它能在i-phone上正常工作。所以我会推荐你​​使用PG-build