Question

我的问题是可折叠块'手风琴'菜单。我最初在线阅读了一个教程，只有当我开始应用可折叠块时才意识到教程已经很老了，我从教程中复制的脚本是：

使用这些脚本，默认情况下无法将可折叠内容设置为关闭，因此data-collapsed =“true根本不起作用，默认情况下菜单是打开的。经过大量谷歌搜索后，似乎其他人也有同样的问题当升级到最新的脚本版本时，问题被排序，所以当我更新到当前的最新版本时，即：

data-collapsed =“true确实有效，但屏幕上的每个页面现在都很小。请看下面的截图，看看我的意思。

这里有什么问题，这是一个CSS问题吗？

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

enter image description here

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

enter image description here

我知道Galaxy笔记有一个巨大的屏幕，但使用移动网站模拟器（以查看各种手机上的网站）该网站在那里看起来很好（虽然现在和今天早上在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 -->

Answer 1

添加viewport元标记，如下所示。

<meta name="viewport" content="width=device-width, initial-scale=1">

三星Galaxy Note上的Jquery移动网站'迷你'

1 个答案: