モバイルブラウザの固定スケール要素

Question

現在、アコーディオン通知（画面上部からスライドするソート）を表示する必要があるJavascriptプラグインを作成しています。

これは、モーダルとアコーディオンでこのCSSを使用するだけで、デスクトップブラウザで美しく機能します。

position: fixed; 
top: 0; 
left: 0; 
width: 100%; 

残念ながら、それは、AndroidとiOSなどのモバイルブラウザ上でとてもうまく動作しません。 Android 4 ICSを搭載したGalaxy S2のデフォルトの動作は、固定位置要素が正しい場所に配置され、画面の幅が100％になることです。残念ながら、ズームをつかんでページのスケールを変更すると、ブラウザは100％の幅を再計算していないように見え、要素は画面外になります。コンテンツをパンしても、固定要素はパンされません。

私はiScrollというJavascriptのプラグインを見つけました.Javascriptのプラグインは、私が望むものとまったく同じように見えます - ページのメインコンテンツのソースを変更して動作させる必要があることを除いて。私のプラグインは任意のサイトで動作しなければならないので、残念ながらこれはオプションではありません。

誰にもアイデアはありますか？

Answer 1

試しコンテンツのサイズを変更モバイルブラウザを停止する必要がありますあなたの頭に

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

を追加します。