javascript - 使用 CSS 或 JS 识别设备类型

Question

所以我不敢说我​​是一个需要帮助的新手。我负责一个学校网站，它有一个预建 block ，可用于根据设备显示某些内容。但是，它无法区分 Android 平板电脑和手机之间的区别，因此始终显示移动版本。

有没有办法让我手动设置它来识别用户设备？

非常感谢! 罗布

Answer 1

使用 CSS 您可以简单地基于 screen-width 和 media-queries ( https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries )。看看 Twitter Bootstrap 是如何开发的。

关于 JS 有很多要说的，但是大多数你可以在这个主题中找到例子:How to detect a mobile device with JavaScript?

我通常尝试使用配置将此信息保存在我的 JS 应用程序命名空间中，例如(使用 Twig)

var App = {    
    'CONFIG' : {
        'IS_TABLET' : {% if isTablet() %}true{% else %}false{% endif %},
        'IS_PHONE' : {% if isMobile() %}true{% else %}false{% endif %}
    }    
}

isTablet() 和 isMobile() 来自后端，可以用一些有用的 Bundle 检测到它(在 Symfony2 的情况下)。

但您能做的最好的事情是制定一个解决方案，该解决方案将适用于不同的设备/浏览器/显示尺寸等。与其破解您的解决方案，不如尝试使其通用