我是开发移动网站的新手。我对这两种方法很困惑,因为我对此没有任何经验。两种方法之间有什么更好的:当我们在css文件中使用所有宽度设备时的css查询或使用使用php技术的jquery mobile用于使用桌面或移动设备的不同用户[用户-> php?->移动使用jquery移动/桌面使用CSS标准]?
非常感谢这个答案
我是开发移动网站的新手。我对这两种方法很困惑,因为我对此没有任何经验。两种方法之间有什么更好的:当我们在css文件中使用所有宽度设备时的css查询或使用使用php技术的jquery mobile用于使用桌面或移动设备的不同用户[用户-> php?->移动使用jquery移动/桌面使用CSS标准]?
非常感谢这个答案
我将按重要性对方法进行分类,从最重要到不太重要:
使用Modernizer javascript 库检测移动/桌面环境
使用Modernizer 服务器或WURFL。比第一个解决方案复杂一点,但更详细(如果您需要有关使用设备的更多数据)
检测桌面/移动设备的错误解决方案。当前的移动设备可以拥有与桌面平台相同的屏幕分辨率
可能的最坏解决方案。特别是如果您想区分智能手机和平板电脑。
要了解有关此解决方案的更多信息,请阅读我的其他文章/示例答案:https ://stackoverflow.com/a/15055352/1848600
我必须在这里发布答案,因为这首先出现在搜索引擎中,并且接受的答案不准确。
关于响应式设计有两个主要问题:
内容:内容应根据视口的宽度/高度进行重组,以便用户无需不断放大和缩小即可查看内容。这需要完全基于视口的分辨率而不管设备如何。它可以是移动设备或桌面上的小窗口。这主要涉及网站的外观和感觉,使用媒体查询绝对没问题。即使恕我直言,最好使用媒体查询来分离视图和逻辑之间的关注点。没有网页设计师喜欢在调试期间看到随机的宽度或高度出现在他们的 html 元素上,而不知道它们来自哪里。媒体查询将帮助您调整元素的大小并显示或隐藏它们;但是,在某些情况下,您可能需要移动元素;
功能:如果您需要根据设备功能打开/关闭功能,请不要依赖视口规范;使用 JS 中可用的大量库。
附带说明一下,智能手机浏览器的渲染分辨率似乎远低于实际设备屏幕尺寸。拿出一个快速的 JS 来显示你的窗口分辨率并在你的手机上运行它。
示例:Chrome 在我 1440x2560 像素的安卓屏幕上以 360x640 像素运行。