現在width=device-width
があるjQueryMobile Webページがありますが、デスクトップコンピューターで表示すると、フォーム要素(テキストフィールドと送信ボタン)がブラウザーの幅まで伸びます。
これらの要素(またはコンテンツdiv全体)がモバイルデバイスで正しく表示されるが、デスクトップコンピューターで表示したときに固定の最大幅を超えないように、最大幅を設定する方法はありますか?
_ <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
_を使用したメディアタイプと画面サイズによっても異なります)。
@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;
}
}
.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;
}