Q

固定頁眉和頁腳在移動版本的網站

2011-01-21 66 views 6 likes

6

我正在開發我的網站的移動版本，我正在測試我的三星Galaxy S android移動設備運行Froyo（2.2）。固定頁眉和頁腳在移動版本的網站

我想，用標準的互聯網瀏覽器查看時，必須在兩者之間滾動頁面的內容固定頭和固定頁腳（這是始終顯示在屏幕上）。

我試過各種組合與身體和排序（這似乎在PC上的瀏覽器查看時工作）的填充，但似乎無法找到解決的辦法。

有人可以幫忙嗎？

注：如果我嘗試這樣的事：

<div id="header" style="position:absolute; top:0px; left:0px;height:200px;overflow:hidden;"></div> 
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px;overflow:auto;"></div> 
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px;overflow:hidden;"></div>

兩個頁眉和頁腳是固定的，但內容不滾動，例如它也似乎是固定的。

這可能是當然的了Android的Froyo 2.2的瀏覽器。

有人嗎？

2011-01-21 Edelcom

A

回答

2

以下網站介紹了此問題的狀態。

http://bradfrostweb.com/blog/mobile/fixed-position/

筆者提出了幾個解決方案的JavaScript。

2012-05-04 11:56:02

6

看來位置是：固定僅partially supported在Android 2.2以上版本，如果您還添加了特定的元標記。你還應該注意到它在iOS下完全不受支持。有腳本用來模仿行爲，但（我沒有在手邊。）

2011-01-21 15:27:42

+2

下面是所需的Android元標記： <元名稱= 「視口」內容=「寬度=設備寬度， user-scalable = no「> – 2011-09-07 02:14:26

1

因爲你很可能只是想這建立一個單一的時間，並希望透明地支持多種移動設備，我會建議你看一看：JQuery Mobile

Article on page layout

2011-01-21 15:31:10

+0

這是一個很好的建議......但是你真的嘗試過JQM固定工具欄嗎？至少從Alpha 4開始，它們在iOS或Android上都不能很好地工作。 – Eli 2011-06-07 13:51:49

-1

如果您已經在用最少的屏幕空間工作，爲什麼你會希望有一個固定的頁眉和頁腳？考慮到每個瀏覽器窗口可能都不夠大，以至於無法實用。當某人在橫向上查看您的頁面時，會發生什麼情況，並且您有一個固定的頁眉和頁腳？

即使上了Nexus S，在800×480，在100％縮放，你會佔用一半的頁面頁眉和頁腳，這就是在肖像。在景觀，忘掉它...

是否有其他設計可能會奏效嗎？

鏈接的用途是什麼？如果它們非常重要，那麼以另一種方式重複它們也許是有道理的。

2011-01-21 15:42:42 KyleWpppd

+1

這不會使問題無效，爲什麼這不起作用。你可能想要一個非常小的標題和網站的名稱，以及一個非常小的版權頁腳。隨你。 – Edelcom 2011-01-21 15:57:21

相關問題