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

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

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

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

选项，似乎很明显：

相同的页面，但是，现有的内容重新格式化为移动
相同的页面，但与addtional标记是重复现有内容，但被格式化的顶部只是额外的标记为移动。如果是桌面浏览器，则非移动内容将隐藏/未呈现。
的一些动态检测移动与非移动则2个不同的网页（桌面与移动）

我觉得＃2可能是最简单的，但我不喜欢重复的想法之间路由内容在页面中。＃1似乎是不现实的，认为我可以用一堆标记来增加我现有的内容，以神奇的方式将其格式化为移动设备（同时还支持桌面）。

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

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

来源

2011-05-01 TMC

看一看http://jquerymobile.com/其良好的资源 – XGreen 2011-05-01 00:23:25

CSS媒体查询是为这个伟大的。（注意，它们是CSS3），它基于查看代理的大小（并且它动态更新！），某些内容可以隐藏或显示，使其基本上成为选项＃1和＃2的变体。你将拥有一个全功能的桌面布局，包括样式和jQuery，当屏幕很小时（意味着它是一个电话或者是一个调整浏览器大小的书呆子），你可以隐藏一些更加细节的东西并重新编写一些东西，也许显示一些其他的东西。阅读媒体查询这里：http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html 编辑：只是为了澄清，你可以完全自定义元素与媒体查询，所以，在桌面大小，div可能有虚线边框，圆角，10px填充等，而在手机格有1px的填充，固体边框等

来源

2011-05-01 00:45:52

我能看到这些查询怎么会隐藏基于一些有用的元素浏览器大小，所以tx为指针。然而，这并不能帮助我，但是我有一个元素，我希望看起来像在桌面上看到另一种方式，而在移动设备上看到另一种方式，例如， '

Hello World

'。在桌面上说，我希望它格式化大字体，而在移动设备上我希望它更小，或者使用jQuery Mobile，我希望它可以在可折叠控件中使用。 – TMC 2011-05-01 00:51:08

你也可以通过媒体查询来做到这一点。您可以为不同类型的设备或分辨率创建不同的样式表。尝试使用Google搜索。 – 2011-05-01 01:35:09

我敢肯定，你是通过这个问题的方式，因为这个问题是几个月前，但我想我会提供我是什么致力于解决相同类型的问题。

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

解决方案：

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'); 
}

来源

2011-07-25 21:37:00 swatkins

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

回答

相关问题