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

我正在使用jquery mobile来模拟iphone应用程序，并且在桌面浏览器中我有一个内容宽度和高度的问题。宽度问题可以通过这种方式解决（宽度= 320px和内容对齐中心）： jquery mobile：为桌面浏览器设置宽度和高度

 
    html { background-color: #333; } 
    @media only screen and (min-width: 321px){ 
    .ui-page { 
     width: 320px !important; 
     margin: 0 auto !important; 
     position: relative !important; 
    } 
    }

但是这会导致在页脚下无用的背景。我猜ui-page的背景可以被替换，并且可以为内容添加额外的div（在页眉和页脚之间），但应该有更好的方法。

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

更新：这里是example。

来源

2012-02-03 idobr

你可以使用JavaScript来调整在页面载入的.ui页的高度 - 这里有一个jQuery的例子：

$(document).ready(function(){ 

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

});

来源

2012-02-03 17:44:21 nerdburn

谢谢你的答案。它不能解决问题。在我看来，条件有效，表达不。 [链接]（http://jsfiddle.net/9Tpwc/6/embedded/result/） – idobr 2012-02-03 19:30:30

+我更喜欢一些css解决方法，比如“max-width：320px”，如果有的话。 – idobr 2012-02-03 19:38:06

你可以尝试删除页面元素的背景，并在内容设置。这里有一个例子代码：

CSS

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

.ui-content { 
    background: #f0f0f0; 
}

来源

2016-11-11 23:20:42

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

回答

相关问题