Phonegapp CSS issue

Question

У меня есть некоторые проблемы с моим приложением Phonegap относительно пользовательского интерфейса. Когда я его просмотра в моем Desktop браузере это выглядит так (как она Шоул быть):

Но когда я реализую его в PhoneGap (КСН) выглядит следующим образом:

Это мой 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); 
} 

Я предполагаю, что это имеет какое-то отношение к классу Objective-C UIWebView, используемому iOS ... Я был бы рад любым советам относительно того, как исправить это. Также было бы лучше протестировать пользовательский интерфейс, не имея при этом необходимости перестройте приложение 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" /> 

Вы можете проверить интерфейс на андроид эмулятор, без создания приложения на PG-сборки, но это не гарантирует, что вы получите корректные результаты для iOS тоже, я имею в виду, если вы протестировали UI на эмуляторе Android, тогда не гарантируется, что он будет хорошо работать на i-phone. Поэтому я рекомендую использовать PG-build