如何刪除Windows Phone Phonegap中的底部空間？
[英]how to remove bottom space in windows phone phonegap?
問題描述
我正在開發Windows Phone phonegap應用程序，在我的第一批解決方案下出現了一些空間。 但我沒有任何解決方案。 如果您有任何解決辦法，請幫助我。
<body onload="init()">
<div id="content">
<div class="title" align="center">
<span class="left">
</span>
<span class="center">
<img src="images/title.png">
</span>
<span class="right">
<a href="home.html" onclick="location.replace(this.href); return false;">
<img src="images/home.png"/>
</a>
</span>
</div>
<div id="rapper">
<div id="scroller2">
<ul>
<li id="ln" onclick="change_click(this.id)"><div style="height:100%; width:100%;" > LN</div></li>
<li id="hn" onclick="change_click(this.id)"><div style="height:100%; width:100%;"> HN </div></li>
<li id="kn" onclick="change_click(this.id)"><div style="height:100%; width:100%;"> KN</div></li>
<li id="nn" onclick="change_click(this.id)"><div style="height:100%; width:100%;"> NN</div></li>
<li id="wn" onclick="change_click(this.id)"><div style="height:100%; width:100%;"> WN </div></li>
<li id="gn" onclick="change_click(this.id)"><div style="height:100%; width:100%;"> GN</div></li>
</ul>
</div>
</div>
<div height="80%">
<div id="wrapper">
<div id="scroller">
<ul id="listcontent">
</ul>
</div>
</div>
</div>
<div id="raper">
<div id="scroller3">
<ul id="pages">
</ul>
</div>
</div>
<div id="previouspage" style="text-align: center;" onclick="pagination(-1)">
<img height="100%" src="images/previous.png"/>
</div>
<div id="nextpage" style="text-align: center;" onclick="pagination(1)">
<img height="100%" src="images/next.png"/>
</div>
</div>
</body>
我的CSS代碼
*
{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a
{
text-decoration: none;
}
html, body
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
width:100%;
height:100%;
overflow: hidden;
text-decoration: none;
font-family:arial;
}
/*panel*/
#content
{
height:100%;
width:100%;
}
/*title*/
.title
{
height:8.75%;
border-bottom-color: #000;
border-bottom-style: solid;
border-bottom-width: 1%;
}
.title img
{
height:98%;
}
.title .center
{
height:100%;
width:50%;
float: left;
}
.title .right
{
height:100%;
width:25%;
float: left;
margin:0 auto;
overflow:hidden;
}
.title .left
{
height:100%;
width:25%;
float: left;
margin:0 auto;
overflow:hidden;
}
/*body*/
#inner
{
height:80%;
width: 100%;
float: left;
}
#header
{
height:12%;
color:#000000;
width: 100%;
text-align:center;
}
#head
{
height:6%;
color:#000000;
width: 100%;
padding-top:2%;
text-align:center;
}
#heading
{
width: 100%;
font-family: arial;
background: #f00;
color:#ffffff;
text-align: center;
align:center;
}
/*tiles*/
.vcard img
{
margin-left:10%;
margin-right:10%;
width: 80%;
height:auto;
display:block;
background-repeat:no-repeat;
background-size:100%;
background-color:transparent;
border:none;
image-rendering: -webkit-optimize-contrast;
}
.vcard
{
width: 33%;
height:auto;
float: left;
overflow:auto;
}
.card
{
width: 33%;
height:33%;
float: left;
overflow:auto;
}
.space
{
height: 10%;
text-align:center;
}
.primary
{
height: 20%;
width:100%;
}
/*scroller*/
#wrapper
{
position: absolute;
z-index: 1;
top: 14%;
bottom: 4%;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
}
#Wraper
{
position: absolute;
z-index: 0;
top: 39%;
bottom: 0PX;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
}
#scroller
{
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
height: auto;
}
#loadmore
{
background:#ff0000;
color:#ffffff;
text-align:center;
}
#rapper
{
position: absolute;
z-index: 1;
top: 8.75%;
bottom: 87%;
left: 0;
width: 100%;
background: #000;
overflow: hidden;
font-family: arial;
border-bottom-color: #000;
border-bottom-style: solid;
border-bottom-width: 1%;
}
#scroller2
{
position: absolute;
font-family: arial;
z-index: 1;
width: 188%;
height: 100%;
background-color: #a00;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller ul
{
list-style: none;
padding: 0;
margin: 0;
width: auto;
height: 100%;
}
#scroller2 ul
{
list-style: none;
padding: 0;
margin: 0;
width: auto;
height: 100%;
background-color: #000000;
text-align: center;
}
#scroller2 li
{
display: block;
float: left;
width: auto;
padding:0% 3px 0% 3px;
height: 100%;
background-color: #000000;
color:#ffffff;
border:2px solid #000000;
border-radius:5px;
}
#scroller3
{
position: absolute;
z-index: 1;
width: 188%;
height: 100%;
background-color: #da1e15;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller3 ul
{
list-style: none;
padding: 0;
margin: 0;
width: auto;
height: 100%;
text-align: center;
}
#raper
{
position: absolute;
z-index: 1;
top: 96%;
bottom: 0%;
left: 20%;
width: 60%;
background: #da1e15;
overflow: hidden;
visibility:hidden;
}
#previouspage
{
position: absolute;
z-index: 1;
top: 96%;
bottom: 0%;
left: 0%;
width: 20%;
background: #da1e15;
border:2px solid #000000;
visibility:hidden;
}
#nextpage
{
position: absolute;
z-index: 1;
top: 96%;
bottom: 0%;
left: 80%;
width: 20%;
background: #da1e15;
border-bottom-color: #000;
border-bottom-style: solid;
border:2px solid #000000;
visibility:hidden;
}
黑色部分提到空間
2 個解決方案
解決方案1
0 2013-09-23 08:14:24
您看到的空間是由於系統認為您正在使用瀏覽器而將地址欄留給空間。
要刪除它，將以下代碼添加到CSS中就足夠了：
@-webkit-viewport{width:device-width;}
@-moz-viewport{width:device-width;}
@-o-viewport{width:device-width;}
@viewport{width:device-width;}
@-ms-viewport{width:device-width;}
如果這還不夠，我將搜索對代碼進行的其他修改。
如果您的視圖變得比預期的小，請嘗試使用：
@-ms-viewport{width:320px;}
解決方案2
0 已采納 2014-04-23 09:21:06
在MainPage.xaml中更改
shell:SystemTray.IsVisible="True"
至
shell:SystemTray.IsVisible="False"
Windows Phone PhoneGap應用程序中的localstorage無法正常工作
[英]localstorage is not working in Windows phone PhoneGap app
如何通過絕對路徑訪問我的應用程序的文件 - Windows Phone - Phonegap / Cordova
[英]how to access via absolute path to my application's file - windows phone - Phonegap/Cordova
如何使用PhoneGap / Cordova為Windows Phone 7創建簡單的全景應用程序？
[英]How do I create a simple panorama application for Windows Phone 7 using PhoneGap/Cordova?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何刪除動態內容底部的空間？
如何刪除HTML頁面底部的多余空間？
captureVideo破碎的Windows手機-PhoneGap
Windows Phone 8的Phonegap / Cordova網絡字體
Phonegap + Windows Phone 8：視口元和縮放問題
Windows Phone 8.1（PhoneGap）中未顯示某些SVG
使用Phonegap進行Windows Phone 8應用開發
Windows Phone PhoneGap應用程序中的localstorage無法正常工作
如何通過絕對路徑訪問我的應用程序的文件 - Windows Phone - Phonegap / Cordova
如何使用PhoneGap / Cordova為Windows Phone 7創建簡單的全景應用程序？
相關標簽