2

私は Web アプリに取り組んでおり、div をビューポートの下部に固定する必要があります。常に表示可能で、常にビューポートの下部にあります。ここに必要なものの例があります: footer . 残念ながら、これは iPhone では機能しません。JavaScriptを使用してこれを行う方法をいくつか考えることができますが、そうはしません。CSSのみを使用してiPhoneでこの効果を得る方法についてのアイデアはありますか?

4

5 に答える 5

6

この状況は iOS 5 で変わりました。今ではoverflow:scrollorposition: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 を実行しているデバイスはまだたくさんありますが、古いデバイスでスクロール機能を遅延ロードすることをお勧めします。これは、次の 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-08T08:11:07.093 に答える
4

できません。少なくともあなたの考え方ではありません。

すべてがJavaScriptであると偽る必要があります。iScrollのようなものを使用してください

それはちょっとひどいですが、Mobile Safari はいかなる種類の固定ポジショニングもまったくサポートしていません。そのため、ページ サイズを画面サイズと同じにしてから、javascript を使用してタッチを処理し、スクロール オフセットを設定し、スクロールバーをアニメーション化し、手動ではないものを作成する必要があります。

私がリンクしたこのスクリプトは、多くのことを行いますが、ネイティブ ソリューションほど堅牢ではありません。

于 2010-03-16T17:15:45.747 に答える
0

コード付きの実際の例を次に示します。気弱な人向けではありません。

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

于 2010-09-14T19:45:13.363 に答える
0

これは、CSS3、HTML、および JavaScript を組み合わせて iPhone 用のナビゲーション バーを作成する方法の例です。 http://www.mindovercode.com/2010/09/12/iphone-navbar-using-xui/

ps: ランドスケープ モードで動作します。

于 2010-08-10T02:40:06.420 に答える
0

これには、はるかに簡単に機能する新しい JavaScript があります: http://joehewitt.github.com/scrollability/

したがって、iOS 5 では、固定位置とオーバーフロー スクロールが利用可能になります。

于 2011-06-28T22:38:47.083 に答える