web-dev-qa-db-ja.com

Samsungで実際の固定位置を有効にするAndroidブラウザ

Android 2.2以降のブラウザは、少なくともスケーリングがオフになっている場合など、特定の状況で固定位置をサポートしています。JSのないシンプルなHTMLファイルがありますが、Samsungの3つの固定位置です私が試した電話は単に間違っています。真の固定位置の代わりに、ヘッダーがビューの外にスクロールし、スクロールが完了すると元の位置に戻ります。

これは、Android SDKエミュレータでは、私がテストしたすべての構成（2.2、2.3、2.3 x86、4.0.4）で発生しません。WebViewを使用する場合にも発生しません。サムスンの携帯電話上のアプリ：これらの場合、ポジショニングは期待どおりに機能します。

Samsungを作成する方法はありますかAndroid "stock"ブラウザが実際の固定位置を使用するか？

私はテストしました：1. Samsung Galaxy 551、Android 2.2 2. Samsung Galaxy S、Android 2.3 3. Samsung Galaxy S II、Android 2.3

サンプルコード：

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height"> 
    <style>
    h1 { position: fixed; top: 0; left: 0; height: 32px; background-color: #CDCDCD; color: black; font-size: 32px; line-height: 32px; padding: 2px; width: 100%; margin: 0;}
    p { margin-top: 36px; }
    </style>
  </head>
  <body>
    <h1>Header</h1>
    <p>Long text goes here</p>
  </body>
</html>

期待される動作は、灰色のヘッダーが画面の上部に表示され、スクロール量に関係なく表示されたままになることです。サムスンAndroidブラウザでは、スクロールが完了するとビューの外にスクロールし、元の場所に戻ります。固定位置がJavaScriptを使用してシミュレートされているかのように、そうではありません。

編集コメントと「回答」から判断すると、必要なものがはっきりしていないようです。サムスンの壊れた固定位置をオフにし、Androidブラウザーの固定位置をオンにするメタタグまたはCSSルール/ハックまたはJavaScriptトグルを探しています。JavaScriptを探していませんまったくサポートされていないブラウザーに壊れた固定位置を追加するソリューションですが、Samsungの固定位置はすでにそれを行っていますが、それはばかげているように見えます。

androidcsswebkitcss-positionsamsung-mobile
25
Mr. Shiny and New 安宇

Android 2.2ブラウザがJavaScriptを実装するための最良の方法だと思います。

あなたはこのリンクを介して詳細情報を見つけることができます。これは、すべてのモバイルブラウザーでの固定配置についてです。

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

1
Daniel Ta

多分あなたは固定された位置を必要としない別のアプローチを考えることができます...

（デフォルトの）body要素ではなく、paragraph要素にスクロールを追加します。その後、ヘッダーのすぐ下に段落要素を配置できます。これにより、ヘッダーが常にページの上部に表示され、段落内のテキストをスクロールできるようになります。

h1 {
   height: 20px;
}

p {
  position: absolute;
  top: 20px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow-y: auto;
}
1
Anita Foley

Brad Frostの記事への彼のコメントで、Matthew Hollowayは、Anita Foleyの回答に沿った解決策を提案していますが、サポートされていない場合は、overflow：autoのポリフィルを使用します。ここでそれをチェックしてください：

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

0
emik