jQuery Mobile和HTML5 Boilerplate

有谁知道一种方法可以让jQuery Mobile仅在具有特定屏幕分辨率的页面上加载吗？如果有人从桌面/笔记本浏览器查看页面，我不希望jQuery Mobile加载，因为我想使用HTML5 Boilerplate。例如，如果有人从他们的iPhone访问我的页面，我希望jQuery Mobile使用我创建的主题格式化网站，但是如果他们从他们的桌面查看它，我不希望jQuery Mobile将全部额外的标签和东西。jQuery Mobile和HTML5 Boilerplate

由于

来源

2012-01-06 user965879

<script type="text/javascript"> 
<!-- 

var fileref=document.createElement('script') 
fileref.setAttribute("type","text/javascript") 
fileref.setAttribute("src", "js/jqueryMobile.js") 

if (screen.width <= 480) { 
document.getElementsByTagName("head")[0].appendChild(fileref); 
} 
//--> 
</script>

来源

2012-01-06 20:57:11 Davidicus

谢谢大卫。这正是我所期待的！ – user965879 2012-01-06 21:37:02

<script type="text/javascript"> 
    <!-- 
    if (screen.width <= 699) { 
    document.location = "mobile/index.html"; 
    } 
    //--> 
</script>

这块脚本将认识到，屏幕大小，在这种情况下699像素，然后将告诉服务器加载不同的文件夹的根目录的。只需在您的jquery移动网站名为mobile的服务器上创建一个文件夹即可。干杯！

来源

2012-01-06 17:06:09 Davidicus

谢谢，大卫，但不会意味着我将不得不管理两个独立的网站：1）手机，2）标准？我只想管理一个站点，但是当浏览器宽度为480px或更低时，它将加载jQuery Mobile，否则我不会'加载它。 – user965879 2012-01-06 19:05:04

@ user965879对于新的和不知道如何发布感到抱歉。我误解了你想要做的事情。我在下面添加了另一个答案，它将基于相同的if语句向您的标题添加脚本标记。 – Davidicus 2012-01-06 21:05:09

JQM文件：

http://jquerymobile.com/test/docs/api/mediahelpers.html

注：此功能被废弃了测试版，并在1.0rc1删除。我们建议使用CSS3媒体查询。要支持Internet Explorer的旧版本，请查看respond.js，快速&轻量级填充最小/最大宽度CSS3媒体查询。

如果您仍需要此功能，您可以在这里找到代码： jquery.mobile.media.classes.js

来源

2012-01-06 17:50:54

jQuery Mobile和HTML5 Boilerplate

回答

相关问题