2

我的问题是可折叠块“手风琴”菜单。我最初在网上学习了一个教程，直到我开始应用可折叠块时，我才意识到这个教程已经很老了，我从教程中复制的脚本是：

使用这些脚本，可折叠内容根本无法设置为默认关闭，因此 data-collapsed="true 根本不起作用，菜单默认打开。经过多次谷歌搜索，似乎其他人在升级时也遇到了同样的问题到最新的脚本版本，问题得到了排序，所以当我更新到当前的最新版本时，即：

data-collapsed="true 确实有效，但是现在每个页面在屏幕上都很小。请参阅下面的屏幕截图以了解我的意思。

这里有什么问题，是css问题吗？

使用旧脚本我有这个： http: //www.magnetikmedia.co.uk/m/old_script.png

在此处输入图像描述

使用较新的脚本我有这个： http: //www.magnetikmedia.co.uk/m/new_script.png

在此处输入图像描述

我知道 Galaxy note 有一个大屏幕，但使用移动站点模拟器（查看各种手机上的站点）该站点在那里看起来很好（尽管今天早上在 iphone 5 的模拟器上浏览该站点时时不时地，例如，屏幕根据我的屏幕截图缩小，所以某处肯定有错误）从一页头到尾的代码在这里，因为其他页面相同，只是内容不同

<head>
<title>Page Title</title>
<link rel="stylesheet" href="mobile.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

</head>

<body>


<!-- Start of first page -->
<div data-role="page" id="home">

<div data-role="header1">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/magnetikmedia_header.png" width="90%"></div>
</div>
<div>
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/welcome_banner.png" width="100%"></div>
</div><!-- /header -->

<div data-role="content">   
    <ul data-role="listview">
<li data-role="list-divider"><h3 align="center">Digital Design & Development</h3></li>

<li><a href="#about">
<div class="mobile_menu_hpage"></div>
  <div class="list-text">About Us</div>
</a></li>

<li><a href="#getsocial">
  <div class="mobile_menu_hpag"></div>
  <div class="list-text">Get Social</div>
</a></li>

<li><a href="#services">
  <div class="mobile_menu_hpag"></div>
  <div class="list-text">Services</div>
</a></li>

<li><a href="http://www.magnetikmedia.co.uk/portfolio.htm">
  <div class="mobile_menu_hpag"></div>
  <div class="list-text">Portfolio</div>
</a></li>

   <li><a href="http://www.magnetikmedia.co.uk/contact.htm">
  <div class="mobile_menu_hpag"></div>
  <div class="list-text">Contact Us</div>
</a></li>
</ul>   
</div><!-- /content -->

  <div id="footer1">
<div id="footer_left">
<div align="center"><a href="http://www.facebook.com/magnetikmedia"><img src="http://www.magnetikmedia.co.uk/m/images/fbook_foot.png" width="30" height="30" style="margin-right:10px;" ></a><a href="http://www.twitter.com/magnetikmedia"><img src="http://www.magnetikmedia.co.uk/m/images/twitter_foot.png" width="30" height="30" style="margin-right:10px;" ></a><a href="http://magnetikmedia.blogspot.co.uk"><img src="http://www.magnetikmedia.co.uk/m/images/blogger_foot.png" width="30" height="30" style="margin-right:10px;" ></a><a href="http://www.linkedin.com/in/magnetikmedia"><img src="http://www.magnetikmedia.co.uk/m/images/linkedin_foot.png" width="113" height="30" style="margin-right:10px;" ></a></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
  <div align="center"><!-- /footer -->

  </div>
</div><!-- /page -->
4

1 回答 1

2

添加viewport元标记如下。

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2013-04-15T18:47:58.010 回答