Question

我正在使用jQuery Mobile来运行主要在桌面浏览器上运行的应用程序。我面临的唯一问题是按照屏幕尺寸拉伸元素。

例如：如果在大型显示器上观看，按钮将占据整个屏幕尺寸。

我想知道，我该如何控制这些元素的大小。

我想知道，如果我通过选择jQM用于桌面使用做出了错误的选择。但我真的很喜欢jQuery Mobile风格。任何替代方案。

<html>
<head>
<meta charset="utf-8">

<title>jQuery Mobile Testing Web App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 

<div data-role="page" id="page">
    <div data-role="header">
         <a href="#" rel="external" data-ajax="false" data-role="button" data-icon="home" data-theme="b"> Dashboard </a>
        <h1>Testing Document</h1>

    </div>
    <div data-role="content">
    <form method="POST" action="#" data-ajax="false">
        <div data-role="fieldcontain">
          <ul data-role="listview" data-inset="true">
            <li data-role="list-divider"> <h3> Services </h3> </li>
             <li data-theme="a"> Class 1 </li>
            <li> <label for="flip-b">Element1</label>
                <select name="element1" id="flip-b" data-role="slider">
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select>
             </li>   
            <li> <label for="flip-b">Element2</label>
                <select name="element2" id="flip-b" data-role="slider">
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select>
             </li> 
             <li> <label for="flip-b">Element3</label>
                <select name="element3" id="flip-b" data-role="slider">
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select>
             </li> 
             <li> <label for="flip-b">Element4</label>
                <select name="element4" id="flip-b" data-role="slider">
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select>
             </li> 
             <li> <label for="flip-b">Element5</label>
                <select name="element5" id="flip-b" data-role="slider">
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select>
             </li> 
             <li> <label for="flip-b">Element6</label>
                <select name="element6" id="flip-b" data-role="slider">
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select>
             </li> 
              <li> 
                    <label for="select-choice-1" class="select">Main Location</label>
                       <select name="main_location" id="select-choice-1">
                          <option value="NSW">NSW</option>
                          <option value="ACT">ACT</option>
                          <option value="VIC">VIC</option>
                          <option value="SA">SA</option>
                          <option value="QLD">QLD</option>
                          <option value="NT">NT</option>
                          <option value="WA">WA</option>
                          <option value="TAS">TAS</option>
                        </select>                     
              </li> <!-- Select Menus: Main Location-->        

            </ul>
        </div> <!-- End of Field Contain div tag -->   
    <button type ="submit" data-role="button" data-inline="false" data-icon="search" data-iconpos="left" data-theme="b">Search</button>    
   </form>
   </div> <!-- End of Content div tag --> 
    <div data-role="footer">
        <h6>2012 &copy</h6>
    </div> 
</div>
</body>
</html>

Answer 1

jQM文档将提供帮助：

更新：

使用我建议的链接中的方法：

http://jsfiddle.net/xLdKd/3/
http://jsfiddle.net/xLdKd/3/embedded/result/（整页视图）

如何为桌面浏览器调整jip Mobile元素（如翻转按钮，列表等）的大小？

1 个答案: