如何在iPhone Web應用程序中創建頁腳/工具欄？

我正在開發一個web應用程序，我需要獲得一個div來堅持視口的底部。始終可見並始終位於視口的底部。有一個我想要的例子：footer。不幸的是，這在iPhone上不起作用。我可以想到一些使用javascript來做到這一點的方法，但我寧願不要。任何想法如何獲得這種效果的iPhone只使用CSS？如何在iPhone Web應用程序中創建頁腳/工具欄？

來源

2010-03-16 Hector Scout

對不起，你要編寫一個頁腳/在iPhone上使用HTML和CSS的標題欄？我回過頭來，我沒有注意到「iphone-web-app」標籤[/編輯] – 2010-03-16 17:10:14

我的博客目前正在關閉，因此鏈接已損壞:( – 2010-09-14 19:50:40

你不行。至少不是你想的那樣。

你必須假裝整個事情是JavaScript。使用類似iScroll

它有點爛，但移動Safari不支持任何類型的固定定位。所以你必須使頁面大小等於屏幕大小，然後使用JavaScript處理觸摸並設置滾動偏移量和動畫滾動條以及不需要手動操作的內容。

我鏈接的這個腳本爲你做了很多工作，但它不像本地解決方案那樣健壯。

來源

2010-03-16 17:15:45

我有點害怕這可能是不幸的是，當你去風景時，甚至會發生這種情況，我猜我只需要更加努力地設計應用程序就可以了，但是......感謝你的回答，但是， – 2010-03-16 17:31:22

下面是如何結合CSS3，HTML和JavaScript爲iPhone創建導航欄的示例。 http://www.mindovercode.com/2010/09/12/iphone-navbar-using-xui/

ps：它在橫向模式下工作。

來源

2010-08-10 02:40:06

這個鏈接現在已經死了。農場。 – 2015-08-03 18:39:12

下面是一個工作示例，附帶代碼。這是不是爲微弱的心臟：

http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

來源

2010-09-14 19:45:13 kingjeffrey

有這個新的JavaScript的作品要容易得多：可用http://joehewitt.github.com/scrollability/

因此，在iOS 5中會有固定的位置和溢出滾動！

來源

2011-06-28 22:38:47

這種情況在iOS 5中發生了變化。現在您可以使用overflow:scroll或position:fixed並且它會執行預期的操作。例如，這種類型的代碼：

<header style=" 
    position: fixed; top: 0; left: 0; 
    width: 100%; height: 20px; font-size: 20px"> 
    Heading 
</header> 
<article style="margin: 20px 0"> 
    Your page here 
</article> 
<footer style=" 
    position: fixed; bottom: 0; left: 0; 
    width: 100%; height: 20px; font-size: 20px"> 
    Footer 
</footer>

...應該沒有問題的工作。雖然仍有運行較早版本的iOS的許多設備，所以你可能要延遲加載Scrollability舊設備上，你可以用這個JavaScript測試：

var isios = navigator.appVersion.match(/CPU(iPhone)? OS ([0-9]+)_([0-9]+)(_([0-9]+))? like/i); 
// if that succeeds, it usually returns ["CPU OS X_Y_Z like",undefined,X,Y,Z] 
if (isios && isios[2] < 5){ 
    // load scrollability here. jquery example: 
    $.getScript("/js/scrollability.min.js", function() { 
     // code to run when scrollability's loaded 
    } 
}

來源

2012-01-08 08:11:07 kirb

如何在iPhone Web應用程序中創建頁腳/工具欄？

回答

相關問題