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

Question

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

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

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

看似显而易见的选项:

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

我认为#2可能是最简单的,但我不喜欢页面中重复内容的想法.#1似乎不切实际地认为我可以通过一堆标记来扩充我现有的内容,以神奇地为移动设备提供格式(同时仍然支持桌面).

我很感激任何有关最佳实践可能存在的指南的提示和指示.

澄清:假设我没有使用Rails,ASP.NET MVC等.

Answer 1

CSS Media Queries非常适合这种情况.(请注意,它们是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');  
}