Javascript 设置jQuery Mobile的大小？_Javascript_Jquery_Jquery Mobile

Javascript 设置jQuery Mobile的大小？

javascript jquery jquery-mobile

Javascript 设置jQuery Mobile的大小？,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,默认情况下，jQuery Mobile将填充整个屏幕宽度。有没有一种方法可以指定jQuery Mobile应该填充的大小，比如提供一个元素来填充？您只需通过CSS指定即可例如： CSS HTML 大小是自动的。如果在页面div外部创建一个div，并将其设置为浮动和像素宽度，则它应该正确显示在页面div旁边。只需在CSS文件中设置这一行即可。让它变得很容易。如果愿意，将“最大宽度”更改为“宽度” .ui页面{ 最大宽度：500px； }由于数据role=“page”div具有位置：绝对值，因此在

默认情况下，jQuery Mobile将填充整个屏幕宽度。有没有一种方法可以指定jQuery Mobile应该填充的大小，比如提供一个元素来填充？

您只需通过CSS指定即可

例如：

CSS

HTML

大小是自动的。如果在页面div外部创建一个

div

，并将其设置为浮动和像素宽度，则它应该正确显示在页面div旁边。

只需在CSS文件中设置这一行即可。让它变得很容易。如果愿意，将“最大宽度”更改为“宽度”

.ui页面{ 最大宽度：500px；

}

由于

数据role=“page”

div具有

位置：绝对值，因此在包装上指定宽度不起作用。您提供的jQuery代码片段确实会更改宽度，但它会保留在页面的左上角，而不管其容器位于何处。更不用说，它是围绕jQuery Mobile提供的框架工作的。当您可以只使用已经存在的包装器或类时，无需添加额外的包装器或类。
#wrapper {width:95%}

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head> 
<body> 

<div id="wrapper">
<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Page content goes here.</p>      
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
</div>

</body>
</html>

$("div[data-role='page']").css('width',$("#container_element").innerWidth()+"px");