支持桌面和移动的单个JQuery页面的提示？

我目前有一个网站，它承载一个我想同时服务于桌面和移动浏览器的页面。桌面设计和实现已经完成，并使用JQuery

我希望当用户在JQuery mobile支持的移动浏览器上访问时，此页面使用不同的布局

我正试图找出最好的方法来做到这一点，但似乎找不到关于这方面最佳实践的信息。我在这里找到的所有现有文档/指南都假设您正在编写的jQuery页面专门支持移动浏览器，因此不涉及桌面格式

显而易见的选择：

相同的页面，但仅在现有内容之上添加标记，以便为移动应用程序重新格式化

同一页面，但带有附加标记，复制现有内容，但已针对移动设备格式化。如果使用桌面浏览器，则隐藏/不呈现非移动内容

移动和非移动的一些动态检测，然后在两个不同页面之间路由（桌面和移动）

我认为#2可能是最简单的，但我不喜欢在页面中重复内容的想法#我认为我可以用一堆标记来扩充现有内容，从而神奇地将其格式化为移动版（同时仍然支持桌面版），这似乎是不现实的

如果有任何关于最佳实践的提示和指南，我将不胜感激

---

澄清：假设我没有使用Rails、ASP.NET MVC等。

CSS媒体查询非常适合于此。（注意，它们是CSS3）基于查看代理的大小（并且动态更新！）某些内容可以隐藏或显示，使其基本上成为您选项1和2的变体。你会有一个功能齐全的桌面布局，有样式和jQuery，当屏幕很小时（意味着是一部手机或一个调整浏览器大小的书呆子），你会隐藏一些更详细的东西，重新设计一些东西，可能还会显示一些其他东西。 在此处阅读有关媒体查询的信息：

---

编辑：只是澄清一下，你可以通过媒体查询完全定制元素，因此，在桌面大小上，div可能有点边框、圆角、10px填充等，而在手机上，div有1px填充、实心边框等。我相信你已经解决了这个问题，因为这个问题已经有几个月了，但我想我会为同一类型的问题提供我正在研究的东西

问题：我想要一个可以在移动设备、平板电脑和大小桌面屏幕上使用的网站

解决方案：

• CSS媒体查询是让页面缩放并“响应”用户视口的明显选择。现在有一个巨大的推动和一些关于响应性设计、响应性图像等的有趣讨论。我正在为mobile first（另一个推动）设计，并使用媒体查询随着屏幕变大而更改布局/可查看内容

• 然后JavaScript就出现了大问题。如果我使用移动JS框架，那么它也将包含在我的桌面版本中——这并不理想。如果我在两者上都使用jQuery，那么在我的移动版本中我会得到很多我不希望得到的额外带宽。我已经决定使用Modernizer的新媒体查询测试来根据屏幕大小加载脚本。这使我能够保留一个页面，并将其提供给不同的屏幕大小，而不会牺牲手机/平板电脑/或台式机的质量。下面是一个简单的Modernizer媒体查询检查：

if（modernizer.mq（'仅屏幕和（最大宽度：480px）'）{
modernizer.load（'/mobile.js'）；
}else if（modernizer.mq（'仅屏幕和（最大宽度：768px）'）{
modernizer.load（'/table.js'）；
}否则{
load（'/desktop.js'）；
}  

看看这是一个很好的资源，我可以看出这些查询对于根据浏览器大小隐藏某些元素是多么有用，因此指针的tx。但这对我没有帮助的是，假设我有一个元素，我想在桌面上和移动设备上分别显示为一种方式，例如，

Hello World

。比如说，在桌面上我想要大字体格式化，在手机上我想要小一些，或者使用jQuery手机，我想要一个可折叠的控件。你也可以通过媒体查询来实现这一点。您可以为不同类型的设备或分辨率创建不同的样式表。试着用谷歌搜索一下。