什么是更好的:CSS媒体查询或JQuery移动?

时间:2013-03-13 09:27:13

标签: css jquery-mobile media-queries

我是开发移动网站的新手。我对两种方法感到困惑,因为我没有任何经验。在两种方法之间更好的是:当我们在css文件中使用所有宽度设备时 css查询使用jquery mobile对于使用桌面或移动设备的不同用户使用php技术 user-> php? - > mobile使用jquery mobile / desktop使用css标准]?

非常感谢您的回答

3 个答案:

答案 0 :(得分:2)

我将根据重要性对方法进行分类,从最重要的一个到不太重要的方法:

客户端检测

使用Modernizer javascript库检测移动/桌面环境

服务器端检测

使用Modernizer ServerWURFL。稍微复杂然后第一个解决方案,但更详细(如果您需要有关使用过的设备的更多数据)

CSS媒体查询

检测桌面/移动设备的错误解决方案。当前的移动设备可以具有与桌面平台相同的屏幕分辨率

基于JavaScript的浏览器嗅探

最糟糕的解决方案。特别是如果你想区分智能手机和平板电脑。

要了解有关此解决方案的更多信息,请阅读我的其他文章/答案,并附上示例:https://stackoverflow.com/a/15055352/1848600

答案 1 :(得分:1)

我必须在这里发布答案,因为这在搜索引擎中首先出现,并且接受的答案不准确。

关于响应式设计有两个主要问题:

  1. 内容:应根据视口的宽度/高度重新构建内容,以便用户无需恒定放大和缩小即可查看内容。这需要仅基于视口的分辨率而不管设备如何发生。它可以是移动设备或桌面上的小窗口。这主要涉及网站的外观和感觉,使用媒体查询绝对没问题。即使是恕我直言,最好使用媒体查询来分离您的视图和逻辑之间的关注点。没有网页设计师喜欢在调试过程中看到随机宽度或高度显示在他们的html元素上,而不知道它们来自哪里。媒体查询将帮助您调整元素的大小并显示或隐藏它们;但是,在某些情况下,您可能需要移动元素;我通常使用角度js中的ng-if或ng-switch与现代化器结合使用。

  2. 功能:如果您需要根据设备功能打开/关闭功能,请不要依赖视口规范;使用JS中提供的大量库。

答案 2 :(得分:0)

另一方面,智能手机浏览器似乎以远低于实际设备屏幕尺寸的分辨率呈现。快速推出JS以显示您的窗口分辨率并在手机上运行。

示例:Chrome在我的1440x2560px的Android屏幕上以360x640px运行。