【问题标题】:What is better: CSS media queries or JQuery mobile?哪个更好:CSS 媒体查询或 JQuery 移动?
【发布时间】:2013-03-13 09:27:12
【问题描述】:

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

非常感谢您的回答

【问题讨论】:

    标签: css jquery-mobile media-queries


    【解决方案1】:

    我将按重要性对方法进行分类,从最重要到次要:

    客户端检测

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

    服务器端检测

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

    CSS 媒体查询

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

    基于 JavaScript 的浏览器嗅探

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

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

    【讨论】:

    • 亲爱的 Gajotres,哇,我真的知道任何 jquery 都像 Modernizer。那太好了 Gajotres,,,谢谢.....如果我能知道,您的电子邮件或您的网站?你太棒了……
    • 您可以在我的个人资料中找到我的电子邮件/网站。如果您需要更多帮助,请随时与我联系。
    • hmm,为什么使用modernizer,网页无法调整大小[d.alistapart.com/…?网站modernizr.com 的坚果可以调整大小,你能给我最好的教程吗?谢谢
    【解决方案2】:

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

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

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

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

    【讨论】:

      【解决方案3】:

      附带说明,智能手机浏览器似乎以远低于实际设备屏幕尺寸的分辨率呈现。制作一个快速的 JS 来显示你的窗口分辨率并在你的手机上运行它。

      示例:Chrome 在 1440x2560 像素的 Android 屏幕上以 360x640 像素运行。

      【讨论】:

        猜你喜欢
        • 2021-12-09
        • 2011-11-09
        • 2017-08-06
        • 1970-01-01
        • 2016-09-03
        • 1970-01-01
        • 2013-04-09
        • 2021-10-11
        • 2018-04-10
        相关资源
        最近更新 更多