2

我已经使用 jQuery Mobile UI 构建了我的移动网站，但我现在意识到我需要一些功能使其与我的桌面网站不同（桌面网站上的日期选择器日期应该更长，等等）。

我研究了 Modernizr 和 matchMedia 来帮助我加载单独的 js 文件，但我无法找到一种让它响应式工作的好方法。Modernizr 仅在初始加载时有效（除非我错过了文档中的某些内容），并且当 matchMedia 超过最小/最大宽度阈值时，我遇到了多次执行的问题。它有时可以工作，但问题在于添加/删除单独的 js 文件。最重要的是（但不是一个大问题 - 我不认为），Chrome 在将脚本从另一个脚本加载到 DOM 时会引发错误。

最好的办法是编写一个 js 文件，然后添加一个侦听器，例如$.mobile.media("screen and (min-width: XXXpx)")主体的宽度，更改我需要的值吗？

我可能让这对自己来说太难了，或者因为我试图保持 HTTP 请求和站点大小尽可能小而遗漏了一些明显的东西，但我无法为此找到一个好的解决方案。

谢谢！

Lightning Round Bonus 问题data-role data-id data-theme：在切换到桌面站点后保留所有 jQuery Mobile 样式 () 是否是好的做法/正确？它看起来非常糟糕......对于只在更大屏幕上观看它的人来说非常糟糕。

4

1 回答 1

1

恕我直言，最好的方法是在您的 javascript 中引入几个标志，例如“isMobile”、“isTablet”或“isDesktop”，这些标志将在附加到 webapp 的“pageinit”事件的方法中设置。稍后，您可以检查这些标志以在代码的特定部分中使用正确的版本进行相应的操作。

检查标志的方式取决于您的架构。在我现在正在工作的项目中，我从页面主体的后端附加的类中提取该信息，但那是因为我们有该信息。您可以尝试使用像Harvey这样的库来观察将被触发的媒体查询，并相应地设置标志。我不认为您的选择到此为止，但恐怕我无法为您提供更多帮助！

于 2012-10-02T18:01:50.440 回答