web-dev-qa-db-ja.com

Android Web App：Position：fixed broken？

私はモバイル向けのWebアプリケーションを開発中です。 iPhone/Windows Mobile/Palmなどでも実行できる1つのアプリケーションを開発しなければならないという勝利の状況が私には思えたので、私はWebアプリケーションを使いました。

コンセプト、アイデア、デザインを数日行った後、今日テストを開始しました。私がやりたかったのは、ページの下部にあるメニューを用意することでした。このiPhoneアプリケーションのスクリーンショットの下部にあるメニューとまったく同じです。

enter image description here

CSSを使用すると、これを行うのは本当に簡単でしょう。位置のみを使用：固定。底：0;トリックを行ったでしょうが、モバイルブラウザーでは同じように動作しないことがわかりました

ページを2つのセクションに分割しようとしました。1つは（コンテンツの）スクロール可能なdivで、もう1つは下部のメニューです。 Scrollable divもAndroidでは機能しません。運もないフレームも使ってみました。携帯電話のページの下部に貼り付けられるメニューを再作成する方法を誰かが知っていますか？

htmlcssandroidwebkitposition
32
user334899

私のAndroid CyanogenModを使用するN1では、私もこの問題と修正を行いました：

   <meta
     name="viewport"
     content="width=100%; 
             initial-scale=1;
             maximum-scale=1;
             minimum-scale=1; 
             user-scalable=no;"
    />

具体的にはuser-scalable=no;部分、0の代わりにno。

興味深いことに、これはボタンのandroidsレンダリングを中断しますが、ボタンに背景色を設定するだけです。

50
missaghi

追加するだけです：

<meta name="viewport" content="width=device-width, user-scalable=no" />

Android 2.2+に設定されています。これは、私の携帯電話でテストしていたページで機能しました。ソース： CSSのposition：fixedをいつ使用できますか？

16
kad81

これは動作するはずです:) http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

4
Lyon

HTCの欲望でAndroid 2.2（Froyo））にアップグレードしました。少なくとも、ビューポートメタタグを使用して初期値を設定すると、位置が修正されたことを嬉しく思いますスケールと幅ですが、それでも通常のWebページでは機能しないようです。

1
Anders Ekdahl

HTMLヘッダーでメタ名を使用していることを確認しました

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Android 2.2、2.3以降およびiOS 4以降）での垂直および水平スクロールの固定divがあります。ここで例を作成しました https：// dl。 dropbox.com/u/908148/website/test-scroll.html

0
Luca Iulian