JQuery Mobile和CSS3媒体查询

Question

我正在编写一个移动友好的网页，并且是JQuery Mobile。但是，在我的CSS中，我正在使用一些媒体查询。除了如果我想使用AJAX（JQueryMobile的'data-ajax'属性）加载页面，这一切都很好。如果我这样做，就不会出现媒体查询被考虑在内的情况。只有当我刷新媒体查询出现的页面。

有没有人在这方面有过任何经验，或者他们可以摆脱我的这种情况？

我已经在azure上发布了一个示例来演示。它包含一个登录表单（不需要用户名或密码 - 只需点击“登录”）。在目标（home.html）上有一个div，它应该使用大于767px的宽度的媒体查询来隐藏）。但是，当我调整窗口的大小时，它并不隐藏。只有当我重新加载页面并调整大小时才会发生。

在这里看到：提前http://testjquerymob.azurewebsites.net/index.html

感谢。

T

Answer 1

啊哈！

在我身边很愚蠢的错误。正如我在上面提到的响应hungerpain我在包含<style>标签内的媒体查询CSS。在从包含的样式表中移动它们之后，我认为它会对问题进行排序。事实证明它没有。但是，我发现后发现它在加载页面（我加载目标URL的页面）内，我应该引用包含的样式表或至少在<style>标记中添加媒体查询。

因此，要总结 -

1. 我装的index.html
2. 我想home.html的加载到它，并根据视口大小home.html的隐藏DIV。
3. 相反的，包括在home.html的媒体查询，因为我在做我应该已经包含在父页面的媒体查询/样式 - 的index.html，因为它是到该页面的html内容home.html的将被载入

谢谢你们，

牛逼