2012-12-15 25 views
8

コード例ここでは幅=装置幅iscrollで失敗します。http://pastebin.com/95z3pftQ水平スクロールが

私は、固定ヘッダと、モバイルページを作成しようとしている、と外部入力されます「コンテンツ」セクションには、(消毒、それ以外の場合は任意のHTML)。 iscrollなどを使用する必要があります。なぜなら、垂直/水平スクロールとズームをサポートする必要があるからです。

width=device-widthメタビューポートディレクティブでは、幅が指定されていない限り、モバイルSafariはすべてのブロックレベルの要素を内容の幅に関係なく画面の幅にサイズ変更します。 iscrollは、コンテナの幅(画面の幅)を調べ、水平方向にスクロールするコンテンツが増えていることを認識しません。この例では、私のiPhoneのdiv#containerの計算幅は290pxですが、table#really-wide-contentの計算幅は1000pxです。

ページ上の1つのdivの内部にmeta viewportディレクティブの効果を無効にする方法はありますか?必要に応じてプログラムでインラインスタイルを変更することはできますが、コンテンツの幅やhtml構造はどれほど先生なのか分かりません。

答えて

0

あなたは、このようなこのjQueryの例として、負荷後のある時点でiScrollの幅を設定することができます。

$('#scroller').width(your_width); 

https://stackoverflow.com/a/13898458/1085891を経由してあり、とにかくあなたが破壊しiScrollを再作成することができ、ページが読み込まれた後How to set dynamic width in iScroll for scroller?

また、読み込み後にビューポートの幅をwidth=device-widthに設定できますか?おそらく、これはiScrollが最初にコンテンツを読み込むことを可能にするでしょう。

+2

要素の幅を直接設定することになりましたが、この解決策はよりクリーンになる可能性があります。私は先験的に(問題の原因である)幅を知らないが、後でelement.scrollWidthについて学んだ。 https://developer.mozilla.org/en-US/docs/DOM/element.scrollWidth – RecursivelyIronic

+0

解決策は見つかりましたか? – JSuar

+1

はい。 scrollWidthはまさに私が探していたものでした。 – RecursivelyIronic