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

我的问题是可折叠模块“手风琴”菜单。我开始跟着一个在线教程，这是只有当我到应用，我才意识到教程是很老了，已经从本教程复制的脚本是可折叠块：三星Galaxy上的Jquery移动网站'mini'Note

这些脚本中，可折叠的内容根本不能设置为默认关闭，所以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

我知道银河音符有一个巨大的屏幕，但使用移动网站模拟器（以查看各种手机上的网站）该网站看起来很好（虽然现在和今天上午当浏览网站在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 -->

来源

2013-04-14 JFar_13

我认为解释这个问题的最好方法是内容和页脚刚收缩。在我的银河注2上，标题图像是全尺寸和正确的，但是其他所有内容（内容和页脚）都缩小了，所以页脚在页面的一半处可以看到。即使我将页脚设置为位置：固定它到达屏幕的底部，但仍然很小（我使用的图标在页脚内缩小）顺便说一句，这两个屏幕截图都来自我的手机，所以它不可能是大屏幕尺寸。 –

如果问题出现在'data-collapse = true'中，请使用此代码折叠菜单。 '$（ '[数据角色=可折叠]'）可折叠（）;'。 – Omar

它不仅仅是可折叠菜单，我完全删除了使用该菜单的2个页面，因此在任何地方都没有可折叠的菜单，但同样的问题仍然存在。链接不工作的另一个问题现在也回来了！ –

添加viewport元标记如下。

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

来源

2013-04-15 18:47:58 Omar

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

回答

相关问题