Question

我正在开发phonegap中的android应用程序，但是我的html在Android手机上显示不正常。问题是我有四个div的第一个div显示画布，宽度和高度是100％，第二个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;
}

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

enter image description here

Answer 1

请原谅，如果这是关闭的，但您是否尝试在收到服务器数据后将location.href调用到页面上的锚点？我很好奇这是否有效。如下所示：

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之后已经有一段时间了 - 我已经放弃了为什么要做很多事情并且做我必须要做的事情尽快进出！

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

1 个答案: