Question

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

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

我正在努力找出实现这一目标的最佳方法，但似乎无法找到有关此方法的最佳做法信息。我可以在此找到的所有现有文档/指南都假设您正在编写的jQuery页面专门支持移动浏览器，因此不能解决桌面格式问题。

看似显而易见的选项：

同一页面，但只是在现有内容之上添加额外标记以重新格式化移动设备
同一页面，但附加标记重复现有内容，但格式为移动设备。如果是桌面浏览器，则隐藏/不呈现非移动内容。
移动与非移动之间的一些动态检测然后在两个不同页面（桌面与移动设备）之间路由

我认为＃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填充，实心边框等等。

Answer 2

我确信你已经过了这个问题，因为这个问题已经有几个月了，但我想我会提供我正在研究的同类问题。

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

解决方案：

CSS媒体查询是让页面缩放并“响应”用户视口的明显选择。现在有一个巨大的推动和关于响应式设计，响应式图像等的一些有趣的讨论。我正在设计移动优先（另一个推动）并使用媒体查询来改变布局/可视内容随着屏幕变大。
随之而来的是JavaScript带来的大问题。如果我使用移动JS框架，那么它也将包含在我的桌面版本中 - 不理想。如果我在两者上都使用jQuery，那么我在移动版本中会获得很多额外的带宽，而我却没有。我已决定使用Modernizr允许我使用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');  
}

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

2 个答案: