jquery mobile：为桌面浏览器设置宽度和高度答案

【问题标题】：jquery mobile: set width and height for desktop browserjquery mobile：为桌面浏览器设置宽度和高度
【发布时间】：2012-02-26 07:37:31
【问题描述】：

我正在使用 jquery mobile 来模拟 iphone 应用程序，但我在桌面浏览器中遇到了内容宽度和高度的问题。宽度问题可以这样解决（宽度= 320px，内容居中对齐）：

html { 背景颜色：#333; } @media only screen and (min-width: 321px){ .ui 页面 { 宽度：320 像素！重要；边距：0 自动！重要；位置：相对！重要； } } 但这会导致页脚下无用的背景。我想可以替换 ui-page 的背景，并且可以为内容添加带有背景的额外 div（在页眉和页脚之间），但应该有更好的方法。

那么问题是如何设置内容的宽度和高度，当它在桌面浏览器中打开时？

更新：这里是example。

【问题讨论】：

标签： javascript css jquery-mobile

【解决方案1】：

您可以使用 javascript 在页面加载时调整 .ui 页面的高度 - 这是一个 jQuery 示例：

$(document).ready(function(){

    if($(window).height() >= 480)
    {
        $('.iu-page').height(480);
    }

});

【讨论】：

感谢您的回答。它不能解决问题。在我看来，条件有效，表达无效。 link
+ 我更喜欢一些 css 解决方法，比如“max-width: 320px”（如果有的话）。

【解决方案2】：

您可以尝试移除页面元素的背景并将其设置在内容中。这是一个示例代码：

CSS

.ui-page.ui-body-c {
  background: none transparent;
}

.ui-content {
  background: #f0f0f0;
}

【讨论】：