android - html + css 无法在 android phonegap 中正确呈现

Question

我正在 phonegap 中开发 android 应用程序，但我的 html 无法在 android 手机上正确显示。问题是我有四个 div，第一个 div 显示宽度和高度为 100% 的 Canvas ，第二个 div 显示标题
，第三个 div 显示来自服务器的文本数据，最后一个 div 用于联系表单但是如果第三个 div 的内容增加然后它从中间显示内容会发生什么但我想从顶部显示页面。请看下图。
以下是我的 html 和 css，它们在浏览器上工作正常但在真实设备上工作不正常，我也在上传屏幕截图。请帮我找出这个错误。

html

 <div id="page">
    <div id="wrapper" style="display: none">
        <div id="header">
            <div class="designtech-left back"><a href="javascript:void(0);" id="backToFirstPage" class="back_button" >Back</a>
            </div>
            <div class="designtech-left"><h3 style=" font-size:14px; font-weight:bold;">Coures Detail</h3></div>
        </div>
        <div class="designtech-clear"></div>

        <div class="course_info_div" id="courseInfo">
            //dynamic content name , branch, duration and desc
                <p class="pclass">Course name : <span> Catia & 3D Max</span> </p> 
            <p class="pclass">Branch name :<span> Pune</span> </p>
            <p class="pclass">course duration :<span> 6 Months</span> </p>
            <p class="pclass">Description : <span> Details</span> </p>
        </div>
        <div class="designtech-clear"></div>
        <div class="contact">      

            <form id="contact-form"  method="post">
                <h3>Enquiry form</h3>
                <div>
                    <label>
                        <span>Name: (required)</span>
                        <input placeholder="Please enter your name" type="text" id="name"  >
                    </label>
                </div>
                <div>
                    <label>
                        <span>Email: (required)</span>
                        <input placeholder="Please enter your email address" type="email" id="email-id"  >
                    </label>
                </div>
                <div>
                    <label>
                        <span>Telephone: (required)</span>
                        <input placeholder="Please enter your number" type="tel" id="contact"  >
                    </label>
                </div>

                <div>
                    <label>
                        <span>Message: (required)</span>
                        <textarea placeholder="Include all the details you can" id="enquiry" ></textarea>
                    </label>
                </div>
                <div class="center">
                    <button name="enquiry-form" type="button" id="enquiry-form">Submit</button>
                    <img src="res/drawable-mdpi/gif-load-medium.gif" id="email-progress" style="display: none;"/>
                </div>
            </form>

        </div>
    </div>
</div>

CSS

#page{ 
width:100%!important; 
height:100%; 
background-color:#ffffff;
text-align: left;
margin: 0pt auto;
padding: 0 0px;
position: relative;
}
#wrapper{ width:100%;}

#header {
    position: fixed;
    z-index: 3;
    top: 0px;
    left: 0px;
    width: 100%;
    min-height:45px;
    color: #eee;
    font-weight: bold;
    border-bottom: 1px solid #FFFFFF;
    background: rgb(255,5,5); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,5,5,1) 0%, rgba(143,2,34,1) 69%, rgba(109,0,25,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,5,5,1)), color-stop(69%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0505', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */

}

.course_info_div
{
    position:relative;
    top:45px;
    background:#BCB9B9;
    padding: 12px 10px 20px 10px;
    font-weight:bold;
    font:16px;
    text-align: justify;
}

.course_info_div p.pclass{
    font-weight:bold;
    padding: 5px 0;
}

.contact{
    width:100%;
    margin:0 auto;

}

#contact-form {
    text-shadow:0 1px 0 #FFF;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    background:#F9F9F9;
    padding: 10px 30px 0px 10px;
    position: relative;
}

下图显示了两个 View 。我想要的左侧 View 和右侧 View 在真实设备和模拟器上。

Answer 1

请原谅，如果这太离谱了，但是您是否尝试过在收到服务器数据后将 location.href 调用到页面上的 anchor ？我很好奇这是否可行。所以像这样:

HTML:

<div id="courseInfo">
   <a name="courseInfo"></a>
   <p class="pclass">Course name : <span>
   <!-- ...etc -->
</div>

Javascript:

function refreshUIAfterServerData(){
    document.location.href = 'index.html#courseInfoAnchor';
}

很明显，这并不能解释问题发生的原因 - 但老实说，在我自己处理了一段时间的 Android PhoneGap 问题之后 - 我已经放弃了在很多事情上问为什么，只是做我必须做的事情尽可能快地进出!