1

この投稿の下部に、jQueryMobile<div>のページ内を制御するコードがあります。<div>このdivを使用して、テーブルをスクロールさせることができます。これは、ページ上で水平方向にオーバーフローするためです。ただし、このスクリーンショットのように表示されます。

テーブルがページの約50％を占めてから、スクロールします

これと同じ問題は、垂直方向に向けられた場合にも発生しますが、このビューはそれをよりよく示しています。2つの境界線をわかりやすく説明するために、divも横にスクロールしました。大画面で正しく表示されるため、モバイルデバイスではdivをページの全幅に単純に埋めたいのですが、オーバーフローした場合は水平方向にスクロールしたいと思います。私は両方overflow: scroll;をoverflow: auto;試しましたが、コードを使用した場合と使用しない場合の両方を試しました-webkit-overflow-scrolling: touch;。幅を設定するために私が試した方法は、他の場所で提案されているように、まだ機能していませwidth: 100%;んposition: absolute; left: 0; right: 0;。

CSS：

@media only screen and (min-width: 1025px){
    .ui-page {
    width: 960px !important;
    margin: 0 auto !important;
    position: relative !important;
        border-right: 5px #111111 outset !important;
        border-left: 5px #111111 outset !important;
        border-bottom: none;
    }
}

@media only screen and (max-width: 1024px){
    .tblscroll {
        width: 100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
}

簡略化されたHTML：

<div data-role="page" id="resultsmain" data-title="Survey Results">
    <div data-role="header"><h1>Title</h1></div>
    <div data-role="content">text
        <div class="tblscroll">
            <table>
                ...table information...
            </table>
        </div>
    </div>
</div>
4

3 に答える 3

1

div 要素の幅で定義された幅の周りに CSS 表示ブロックを使用し、パーセンテージを調整してみてください。

于 2013-03-19T14:58:18.053 に答える
0

これはまったく役に立ちませんが、今日ロードしたところ、完全に機能しました。昨日から今日まで何も変更していないので、何らかのキャッシュの問題だったに違いありません (モバイル キャッシュをクリアしたとしても)。

于 2013-03-20T17:45:45.553 に答える
0

問題はテーブル自体にあるようです。

テーブルの幅を 100% に設定し、拡大または縮小しない行を修正します。

表{ 幅:100%; }

于 2013-03-19T15:04:40.473 に答える