jquery mobile手动调用页面插件答案

【问题标题】：jquery mobile manually invoke page pluginjquery mobile手动调用页面插件
【发布时间】：2013-01-06 00:02:32
【问题描述】：

我需要知道怎么做。

现在，当我不在手机（手持）设备上时，它正在将页面加载到同一页面中。因此，我需要测试一些条件，就像媒体查询一样。例如：测试某个元素是否隐藏，然后才调用插件

我不知道这是否会比页面重定向更好，但我必须看看？

我该怎么做？

jquery mobile 仅用于小屏幕使用（手持设备）。媒体查询工作正常。我的设置方式是隐藏页面上的所有内容，只显示移动部分。

@media screen and (max-width: 555px),
screen and (max-device-width: 480px)
{ 
#wrap,#footer,#masker{display:none;}
#p-mobi{ display:block;}
}

和

<div data-role="page" id="p-mobi">

</div>

谢谢，理查德

【问题讨论】：

标签： jquery css jquery-mobile responsive-design

【解决方案1】：

可用的选项很少。

根据您的需要，这应该是最好的：

https://github.com/borismus/device.js

这完全是客户端检测，无需自定义 js 脚本，只需使用此自定义链接标记并将其匹配到所需的设备尺寸即可。

例如：

<link rel="alternate" href="http://foo.com" id="desktop" media="only screen and (touch-enabled: 0)">
<link rel="alternate" href="http://m.foo.com" id="phone" media="only screen and (max-device-width: 640px)">
<link rel="alternate" href="http://tablet.foo.com" id="tablet" media="only screen and (min-device-width: 641px)">

更多可以在这里找到：https://github.com/borismus/device.js

或者使用this脚本来检测浏览器类型，然后使用这个js加载器来决定应该使用哪个js文件。

例子：
```
yepnope({
    test : Modernizr.geolocation,
    yep  : 'normal.js',
    nope : ['polyfill.js', 'wrapper.js']
});
```
还有一点 yephope.js 与 jQuery 不兼容，所以你需要做一点fix。

我的建议，坚持选项 1。

【讨论】：

谢谢，我稍微调整了我的问题，但要点是一样的。我会尝试第一个，第二个似乎没什么用，因为它只测试浏览器功能。
你说得对，但还是比使用js检测设备类型并手动加载附加内容要好。第一个选项将在没有代码开销的情况下做到这一点。唯一的缺点是它不适用于 IE7 及以下版本，但这不是一个大问题。
我在github上看...不明白他为什么提到modernizr.mq或者他是从modernizr借用代码？
你说的借款是对的，你不需要包括你自己。让我们称它为modernizr 的一部分的包装器。