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

Question

我目前有一个网站托管一个页面，我希望该页面同时为桌面和移动浏览器提供服务。桌面设计和实现已经完成并使用JQuery。

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

我正在尝试找出执行此操作的最佳方法，但似乎无法找到有关最佳实践的信息。我能找到的所有现有文档/指南都假设您正在编写的 jQuery 页面专门支持移动浏览器，因此不解决桌面格式问题。

看起来显而易见的选项：

1. 相同的页面，但只是在现有内容之上添加了额外的标记，以针对移动设备重新格式化
2. 相同的页面，但具有复制现有内容的附加标记，但针对移动设备进行了格式化。如果是桌面浏览器，则非移动内容将被隐藏/不呈现。
3. 对移动设备与非移动设备进行一些动态检测，然后在 2 个不同的页面（桌面与移动）之间进行路由，

我认为#2 可能是最简单的，但我不喜欢页面中重复内容的想法。 #1 认为我可以用一堆标记来增强现有内容，神奇地使其具有适用于移动设备的格式（同时仍然支持桌面），这似乎是不切实际的。

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

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

Answer 1

CSS 媒体查询非常适合此目的。 （注意，它们是 CSS3）基于查看代理的大小（并且它会动态更新！）某些内容可以隐藏或显示，使其基本上成为您的选项 #1 和 #2 的变形。你会有一个大的、功能齐全的桌面布局，带有样式和 jQuery，当屏幕很小时（意味着它是一部手机或一个书呆子调整浏览器的大小），你会隐藏一些更详细的内容并重新设计一些内容，也许会显示一些其他的东西。
在此处阅读有关媒体查询的信息：http://ie.microsoft.com/testdrive/HTML5 /CSS3MediaQueries/Default.html
编辑：为了澄清，您可以使用媒体查询完全自定义元素，因此，在桌面尺寸下，div 可能具有虚线边框、圆角、10px 填充等，而在手机上 div 具有 1px 填充、实心边框， ETC。

Answer 2

我确信您已经解决了这个问题，因为这个问题已经有几个月了，但我想我会提供我正在为同一类型的问题所做的工作。

问题：我想要一个在移动设备、平板电脑以及大小桌面屏幕上都可以接受的网站。

解决方案：

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

• 最大的问题就出现在 JavaScript 上。如果我使用移动 JS 框架，那么它也会包含在我的桌面版本中 - 这并不理想。如果我在两者上都使用 jQuery，那么我会在我的移动版本中获得大量我不想拥有的额外带宽。我决定使用 Modernizr 来允许我通过 Modernizr 的新媒体查询测试加载基于屏幕尺寸的脚本。这使我能够保留一页并将其提供给各种屏幕尺寸，而不会牺牲手机/平板电脑/或桌面的质量。下面是一个简单的现代化媒体查询检查：

if (Modernizr.mq('only screen and (max-width: 480px)')) {  
    Modernizr.load('/mobile.js');  
} else if (Modernizr.mq('only screen and (max-width: 768px)')) {  
    Modernizr.load('/tablet.js');  
} else {  
    Modernizr.load('/desktop.js');  
}