我目前有一个网站,托管一个页面,我想要同时提供桌面和移动浏览器.桌面设计和实现已经完成并使用
JQuery.
当用户访问JQuery Mobile支持的移动浏览器时,我希望让此页面使用不同的布局.
我试图找出最好的方法,但似乎找不到有关最佳做法的信息.我可以找到的所有现有文档/指南假定您正在编写的jQuery页面完全支持移动浏览器,因此不会解决桌面的格式化问题.
显而易见的选项
>相同的页面,但只是额外的标记在现有的内容重新格式化移动
>相同的页面,但附加标记与现有内容重复,但格式化为移动.如果是桌面浏览器,则非移动内容被隐藏/未呈现.
>一些动态检测移动与非移动,然后在两个不同的页面(桌面与移动)之间路由
我认为#2可能是最简单的,但我不喜欢在页面中重复的内容的想法. #1似乎不切实际,认为我可以通过一堆标记增加我现有的内容,以神奇地拥有移动设备的格式(同时仍然支持桌面).
我会感谢任何可能存在的关于最佳做法的指南的提示和指示.
说明：假设我没有使用Rails,ASP.NET MVC等
解决方法
CSS Media Queries对此非常有用. (请注意,它们是CSS3),基于观看代理的大小(并且动态更新！)可以隐藏或显示某些内容,使其基本上是您的选项#1和#2的变体.您将拥有一个全功能的桌面版本,它的样式和jQuery,当屏幕很小(意思是它是一个手机或书呆子调整他的浏览器大小)你隐藏一些更详细的东西,并重新安排几件事情,也许显示其他几件事情.
阅读这里的媒体查询： http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html 编辑：只是为了澄清,你可以完全自定义元素与媒体查询,所以,在桌面大小,div可能有一个虚线边框,圆角,10px的填充等,而在手机上,div有1px的填充,实体边框等等
阅读这里的媒体查询： http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html 编辑：只是为了澄清,你可以完全自定义元素与媒体查询,所以,在桌面大小,div可能有一个虚线边框,圆角,10px的填充等,而在手机上,div有1px的填充,实体边框等等
