html - 媒体查询隐藏桌面视口(viewport)

Question

您可以在我的实时网站 (www.randolphlibrary.org/mobilesite.htm) 上查看我使用的编码

TLDR:当人们查看最大宽度为 768 像素的内容时，如何实现 ListView 样式以使其适用于我的移动用户？

所以我的想法是将这段代码带到标题中:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" media="(max-width: 768px)"/>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>


<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

但是，问题是如何让移动设备实现使用那个 jquery 样式表而不是这个代码下面已经存在的“默认”CSS 样式表？

有人提到只是用 @media= "(max-width: 768px) { display:none; } 进行媒体查询，但我没有购买。

这感觉像是一个基本问题，但我被卡住了。即使我进入“默认”CSS 并添加 display:none;对 body 它什么都不做。

如有任何指点，我们将不胜感激。我正在努力让一个小镇图书馆看起来更吸引我们那些不看手机的年轻人。

更新:教我这个的人解释说，对于一个非常基本的 jQuery Mobile 页面，我们需要 3 个文件在头部:使 jQuery 工作的 CSS 文件，使 jQuery 工作的 Javascript 文件和附加到核心 jQuery 的 Javascript 文件为移动设备提供附加小部件的文件 (jQuery Mobile)。

所以，有了上面显示的 3 个文件，我认为我是黄金。但是还是有问题。

Answer 1

您能否分享一些您的 Jquery 代码？我想我可以帮助你，只需要看看你在做什么。乍一看，您似乎可以在 jquery 文件中处理此问题，以便仅在窗口处于特定宽度时运行代码，这正是您所需要的。