Question

所以我不敢说我是一个需要帮助的新手。我负责学校网站，它有一个预建块，可用于根据设备显示某些内容。但是，它无法分辨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?

我尝试用COnfigs将此信息保存在我的JS App命名空间中（例如使用Twig）

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

isTablet()和isMobile()来自后端，可以使用一些有用的Bundles检测它（在Symfony2案例中）。

但最好的办法是制作一个可以在不同的设备/浏览器/显示器尺寸等工作的解决方案。不要破解你的解决方案，试着让它普及

Answer 2

在JS中你可以试试以下内容，

var isMobile = { Android: function() { return /Android/i.test(navigator.userAgent); }, BlackBerry: function() { return /BlackBerry/i.test(navigator.userAgent); }, iOS: function() { return /iPhone|iPad|iPod/i.test(navigator.userAgent); }, Windows: function() { return /IEMobile/i.test(navigator.userAgent); }, any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows()); } };

Answer 3

您可以通过以下js函数简单地找到设备是移动设备，平板电脑还是台式机。

<html>
<script>
 function getDeviceType() {
    if(navigator.userAgent.match(/mobile/i)) {
        return 'Mobile';
    } else if (navigator.userAgent.match(/iPad|Android|Touch/i)) {
        return 'Tablet';
    } else {
        return 'Desktop';
    }
}

window.alert(getDeviceType())
</script>

</html>

使用CSS或JS识别设备类型

3 个答案: