6

モバイルで表示するとカットされる基本的なテーブル レイアウトがあります。水平スクロールが機能していないようです。表は基本的に引っかかって切りっぱなしです。縦スクロールのみ動作します。Jquery Mobileで水平スクロールを有効にすることは可能ですか?

デスクトップ ブラウザのスクリーンショット:

ここに画像の説明を入力

モバイルのスクリーンショット:

ここに画像の説明を入力

サイズ変更されたデスクトップ ブラウザのスクリーンショット (水平スクロールも機能しません):

ここに画像の説明を入力

サンプルコード:

<div style="overflow-x:auto">
<table> 
        <tr>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>        
        </tr>
</table>            
</div>

ところで、水平スクロールを削除すると<meta name="viewport" content="width=device-width, initial-scale=1">機能しますが、モバイルの幅が大きくなり、モバイル ビューの目的がかなり損なわれます。回避策はありますか？

4

1 に答える 1

1

コンテンツに一致viewportする特定のメタ タグを設定できると思います。widthこれにより、ページの幅を制限できます。

<meta name="viewport" content="width=600px, initial-scale=1">

一般的な意味では、これは応答性が低いため眉をひそめていwidth=device-widthますが、このコンテキストでは、必要なもののように聞こえます.

注:これはテストされていません。タグのwidth宣言にピクセル値を使用したことはありません。viewport私の理解では、これによりデフォルトですべてが表示され、ユーザーはズームイン/ズームアウトしてテキストを読みやすくすることができます。

十分にサポートされている代替手段は、JavaScript でフェイク スクロールを使用することです。iScroll 4 のような既製のソリューションがあります (他にもありますが、現時点では回避されています)。

viewport興味のある方は、メタ タグに関する Apple のドキュメントをご覧ください: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html他のブラウザ メーカー)

于 2012-11-08T20:34:38.527 に答える