頁腳未修復

Question

我正在測試我的移動應用程序，Windows mobile.I頁腳部分有一些問題。問題是關於頁腳修復。當我滾動內容時，頁腳也會起來。但是頁腳在所有瀏覽器中都是固定的，包括IE和除Windows版以外的所有移動設備。

看到代碼，用於IE我給了，

* html #footer { 
    position:absolute; 
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); 
} 

編輯：

html, body {height: 100%;} 

#wrapper {min-height: 100%;} 


#footer { 
    position:fixed; z-index:999; 
    width:100%; 
    bottom:-20px; 
    margin-top: -72px; /* negative value of footer height */ 
    margin-top: 0px !ie; /* for IE */ 
    height: 92px; 
    clear:both; text-align:center; 
    background:url(../../) repeat-x #115c9c; 
    } 

Answer 1

的Windows Phone 7 - 之前和之後，芒果忽略固定的定位和渲染固定元素的位置是：靜態。您測試的IE9桌面和其他瀏覽器支持position：fixed。 http://bradfrostweb.com/blog/mobile/fixed-position/

表達式似乎沒有更多的支持 http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx

因此，我建議刪除「的位置是：固定」，使其首先在IE9的桌面工作，因爲沒有簡單的方法來在WP7調試HTML。看起來您還需要繼續使用額外的js來獲取WP7中的固定頁腳。

Answer 2

這裏是固定頁腳解決方案：

HTML：

<div class="header"> 
    Website Header 
</div> 
<div class="content"> 
    <p> 
    A Solution for fixing footer section on webpage. it works every where even with mobile application too. 
    blah....blah...blah....blah...blah....blah.... blah....blah... ... blah....blah.... ....blah....blah ...blah....blah ....blah....blah .... blah....blah..... blah....blah... blah....blah...blah....blah..!! 
    </p> 
</div> 
<div class="footer"> 
    Fixed Footer is copyright&copy;2012 
</div> 

CSS：

.header{ 
    width:90%; 
    height:15%; 
    background-color:#152087; 
    font-size:20px; 
    font-weight:bold; 
    text-align:center; 
    color:#a7a575; 
    vertical-align:middle; 
    padding:5px; 
    margin:0px; 
} 
.content{ 
    margin:0px; 
    font-size:16px; 
    height:70%; 
    overflow:scroll; 
} 
.footer{ 
    position:fixed; 

    z-index:999; 
    width:90%; 
    clear:both; 

    text-align:center; 
    height: 50px; 
    bottom:-20px; 
    margin-top: -72px; 
    /* value of footer height */ 
    margin-top: 0px !IE; 
    /* for IE */ 
    vertical-align:middle; 
    background-color:#152087; 
    color:#a7a575; 
    font-size:14px; 


} 

我還測試了垃圾箱，所以點擊http://codebins.com/codes/home/4ldqpbv

Answer 3

如果你正在使用jQuery的移動添加到您的css

.ui-page .ui-footer { 
    position: absolute; 
    bottom: 0; 
    z-index: 2; 
} 

Answer 4

你可能想看看windows mobile瀏覽器是否支持固定定位。您可能必須編寫一些JavaScript來檢查頁面滾動的距離，並相應地放置頁腳。

Answer 5

你必須改變視口寬度在Windows手機提供8

下面的代碼會爲HTC的Windows Phone工作的所有3米分辨率8X

包括在你的頭部meta標籤。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> 

包括下列風格在你的腦袋節

<style> 
    @media screen and (min-width: 640px) and (max-width: 1024px) and (orientation:portrait) { 
     @-ms-viewport { width: 50%; }   
    } 
</style 

你需要寫此爲可用於Windows手機8.所有3分辨率您可能必須降低幅度更高的DPI電話和增加寬度較小的DPI電話。

諾基亞lumia 920的視口寬度將在70-80％左右，諾基亞Lumia 820的視口寬度將在85-95％左右。但是你需要找出這兩款手機的最小寬度和最大寬度。