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