3

Windows mobileでモバイルアプリケーションをテストしていましたが、フッター部分に問題がありました。問題はフッターの修正に関するものです。内容をスクロールするとフッターも表示されますが、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;
    }
4

5 に答える 5

5

Windows Phone 7 – Mangoの前後の両方で、固定位置が無視され、固定要素が位置としてレンダリングされます：静的。テストしたIE9デスクトップおよびその他のブラウザーは、位置をサポートします：修正されました。 http://bradfrostweb.com/blog/mobile/fixed-position/

式はサポートされなくなったようです http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx

したがって、WP7でhtmlをデバッグする簡単な方法がないため、「position：fixed」を削除して、最初にIE9デスクトップで機能するようにすることをお勧めします。また、WP7で固定フッターを取得するには、追加のjsを続行する必要があるようです。

于 2012-06-29T00:14:42.743 に答える
0

jquery mobileを使用している場合は、これをcssに追加してください

.ui-page .ui-footer {
   position: absolute;
   bottom: 0;
   z-index: 2;
}
于 2012-07-04T09:18:27.997 に答える
0

フッターを修正するための解決策は次のとおりです。

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をクリックします。

于 2012-07-03T12:33:44.597 に答える
0

Windowsモバイルブラウザが固定位置をサポートしているかどうかを調べたい場合があります。ページがどれだけ下にスクロールされているかをチェックするJavaScriptを記述し、それに応じてフッターを配置する必要がある場合があります。

于 2012-07-04T19:06:34.683 に答える
-1

WindowsPhone8で利用可能な3つの解像度すべてのビューポート幅を変更する必要があります

以下のコードは、HTC WindowsPhone8xで機能します

ヘッドセクションにメタタグを含めます。

<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 Phone 8で使用可能な3つの解像度すべてに対して書き込む必要があります。高DPI電話の場合は幅を狭くし、低DPI電話の場合は幅を大きくする必要があります。

Nokia lumia 920のビューポート幅は約70〜80％になり、Nokia Lumia 820のビューポート幅は約85〜95％になります。ただし、これら両方の電話の最小幅と最大幅を確認する必要があります。

于 2013-08-01T07:18:47.187 に答える