web-dev-qa-db-ja.com

jQuery Mobileでコンテンツの最大幅を設定しますか？

現在width=device-widthがあるjQueryMobile Webページがありますが、デスクトップコンピューターで表示すると、フォーム要素（テキストフィールドと送信ボタン）がブラウザーの幅まで伸びます。

これらの要素（またはコンテンツdiv全体）がモバイルデバイスで正しく表示されるが、デスクトップコンピューターで表示したときに固定の最大幅を超えないように、最大​​幅を設定する方法はありますか？

jqueryjquery-mobilewidth
18
DanielGibbs
_    <style type='text/css'>
    <!--
        html { background-color: #333; }
        @media only screen and (min-width: 600px){
            .ui-page {
                width: 600px !important;
                margin: 0 auto !important;
                position: relative !important;
                border-right: 5px #666 outset !important;
                border-left: 5px #666 outset !important;
            }
        }
    -->
    </style>
_

@media only screen and (min-width: 600px)は、CSSルールを最小ウィンドウ幅600pxのデスクトップデバイスに制限します。これらの場合、jQueryMobileによって作成されたページコンテナのwidthは600pxに固定され、_margin: 0 auto_はページを中央に配置します。残りは美的に結果を改善します。

ただし、1つの欠点があります。これは、スライディングアニメーションでは実際にはうまく機能しません。とにかく大画面では奇妙に見えるので、アニメーションを無効にすることをお勧めします（おそらく、_@media_を使用したメディアタイプと画面サイズによっても異なります）。

43
Stefan Paul Noack
@media only screen and (min-width: 800px){
        body { 
            background:transparent !important; 
            overflow:hidden !important;
        }
        html {
            background: #fff;
            background-attachment: fixed;
            overflow:hidden !important;         
         }
        .ui-page {
            width: 340px !important;
            border:60px solid #111 !important;
            margin: 50px auto !important;
            position: relative !important;
            border-right: 20px #222 outset !important;
            border-left: 20px #000 outset !important;
            border-radius:25px;
            -webkit-border-radius:25px;
            -moz-border-radius:25px;
            overflow-y:scroll !important;
            min-height:600px !important;
            height:600px !important;
            max-height:600px !important;
            padding-bottom:0px;
        }

    }
3
Neo
.ui-page {
    max-width: 320px !important;/*or 640 */
    margin: 0 auto !important;
    position: relative !important;
}

320ピクセルまたは640ピクセルの設計とテスト。デスクトップ（より大きな解像度）で640ピクセルの場合、幅は640ピクセルになり、モバイルではモバイルの幅になります。

必要に応じて境界線を与える

.ui-page {
    border-right: 2px #000 outset !important;
    border-left: 2px #000 outset !important;
}
0
codemirror